表前复选框全选操作

前言

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

具体代码

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。