表前复选框全选操作

前言

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

具体代码

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。