表前複選框全選操作

前言

如下圖，開發中會遇到將數據以表格的形式展現，並在表格前增加複選框方便同時操作其中的幾條數據，這就要有全選功能。

具體代碼

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。