表前复选框全选操作

前言

如下图，开发中会遇到将数据以表格的形式展现，并在表格前增加复选框方便同时操作其中的几条数据，这就要有全选功能。

具体代码

1.页面引入jQuery。

2.最上边的checkbox全选框的

id="allBox"

。

3.下边的checkbox的

name="singleBox"

。

4.在js文件中加入如下代码

$(function(){
$("#allbox").on('click',function(){
$("[name=singleBox]:checkbox").prop("checked",this.checked);
});
$("[name=singleBox]:checkbox").on('click',function(){
var flag=true;
$("[name=singleBox]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#allbox").prop("checked",flag);
})
});

结语

附上一条表格隔行变色样式代码

$("#tableBody tr:odd").css('background','#F3F4F3');

tableBody为table标签下tbody标签的id。