css实现复选框全选和单选兼容ie7+

---------------------css-----------------

input[type='checkbox'] {
  position: absolute;
  clip: rect(0,0,0,0);
}

.lock-checkbox{
  position: relative;
  top:2px;
  left:5px;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  line-height: 15px;
  text-align: center;
  background: #fff;
}

.checkedStyle{
  position: absolute;
  width: 10px;
  height: 4px;
  top: 3px;
  left: 2px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

----------------------------JS--------------------

function initTableCheckbox() {
        var $tbl = $('#batch_authorization_table table');  
    var $thr = $('#batch_authorization_table table thead tr');  
    var $checkAll = $thr.find('#checkAll');  
    $checkAll.click(function(event){ 
        /*将所有行的选中状态设成全选框的选中状态*/
        var flag = $thr.find("input").prop('checked');
        $thr.find('input').prop('checked',!flag);  
        /*并调整所有选中行的CSS样式*/  
        if (!flag) {  
            $tbl.find('div').css({"backgroundColor":"#5FB878","borderColor":"#5FB878"}).children("span").addClass("checkedStyle");  
        } else{  
            $tbl.find('div').css({"backgroundColor":"#fff","borderColor":"#c9c9c9"}).children("span").removeClass("checkedStyle");  
        }  
        /*阻止向上冒泡,以防再次触发点击操作*/  
        event.stopPropagation();  
    });  
    /*点击全选框所在单元格时也触发全选框的点击操作*/  
    $thr.find('#checkAll').parent("th").click(function(){  
        $(this).find('#checkAll').click();  
    });  
    var $tbr = $('#batch_authorization_table table tbody tr');  
    $tbr.find('.lock-checkbox').click(function(event){  
        /*调整选中行的CSS样式*/
        var flag = $(this).prev("input").prop('checked');
        $(this).prev('input').prop('checked',!flag);
        if (!flag) {  
          $(this).css({"backgroundColor":"#5FB878","borderColor":"#5FB878"}).children("span").addClass("checkedStyle");  
        } else{  
          $(this).css({"backgroundColor":"#fff","borderColor":"#c9c9c9"}).children("span").removeClass("checkedStyle");  
        }  
        /*如果已经被选中行的行数等于表格的数据行数,将全选框设为选中状态,否则设为未选中状态*/
        flag = $tbr.find('input:checked').length == $tbr.length ? true : false;
        $thr.find("input").prop('checked',flag);
        if (flag) {  
            $thr.find('div').css({"backgroundColor":"#5FB878","borderColor":"#5FB878"}).children("span").addClass("checkedStyle");  
        } else{  
            $thr.find('div').css({"backgroundColor":"#fff","borderColor":"#c9c9c9"}).children("span").removeClass("checkedStyle");  
        } 
        /*阻止向上冒泡,以防再次触发点击操作*/  
        event.stopPropagation();  
    });  
    /*点击每一行时也触发该行的选中操作*/  
    $tbr.find("td").click(function(){  
        $(this).find('.lock-checkbox').click();  
    });  
    }  
    initTableCheckbox(); 

你可能感兴趣的:(CSS)