前言
如下图,开发中会遇到将数据以表格的形式展现,并在表格前增加复选框方便同时操作其中的几条数据,这就要有全选功能。
具体代码
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。