---------------------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();