在前端開發的過程中，特別是資料表格的處理，我們經常碰到checkbox全選與取消以及動態的根據子類的選中狀態確定全選checkbox是否“checked”

全選與取消全選

現在有如下的表格，有三個tab account，drive，qing，每個tab下面的資料結構大同小異

我們希望點選表頭的checkbox實現下方資料的全選和取消，實現方式相對比較簡單，思路是我們對thead中的checkbox設定監聽，當他的狀態為checked=true的時候，則表格中其他的checkbox的狀態也為checked，反之則是false，實現程式碼如下

//全選與取消全選
let ischecked = false
 
;
function ischeckall() {
    if (ischecked) {
        $('div.active input[type="checkbox"]').each(function () {
            this.checked = false;
        });
        ischecked = false;
    }else {
        $('div.active input[type="checkbox"]').each(function () {
            this.checked = true;
        });
        ischecked = true
 
;
    }
}

實現的結果如下gif所示：

根據tbody-checkbox設定thead-checkbox的狀態

當然我們實現這個功能還是不夠的，考慮以下2個常用場景，

場景1：如果使用者在全選完之後，把tbody中的部分行資料“取消”了選中；
場景2：使用者通過手動點選行內的checkbox最終實現了“全選”的狀態；

顯然我們的上述程式碼是無法做到這個需求的，這時候就得需要對tbody中的checkbox設定監聽，先說思路，我們監聽tbody中的checkbox，檢測到他的狀態有“change”，那麼這個時候我們就獲取當前tbody中有多少行資料得到一個total_val，然後再獲取checkbox狀態為“checked”的input有多少得到exact_val，通過對比這兩個值是否相等，再設定thead中的checkbox的狀態。據前端大佬指導，根據後臺返回的資料量進行比對效率更高，博主這種直接獲取dom的實現方式比較low，大家可以自行選擇。

function listencheckbox() {
    $('div tbody input[type="checkbox"]').on('change', function () {
        //總量
        let total = $('div.active tbody input[type="checkbox"]').length;
        //實際被選中的
        let exact = $('div.active tbody input[type="checkbox"]:checked').length;
        //檢測所有的check選項的有多少與總量進行對比
        $('div.active thead input[type="checkbox"]').get(0).checked = (total === exact);
    });
}

這段程式碼的意思是當“資料渲染完成”之後，對三個tab（account, drive, qing）下面的所有的tbody中的checkbox都設定了同樣的監聽事件，當這種checkbox狀態改變時，注意，這裡我只會獲取當前tab頁面上的checkbox的數量，也就是選擇器中為“active”的，這樣就避免了對其他兩個tab（非active）表格的影響，最後設定當前active頁面的thead的checkbox的屬性。最終的實現效果如下gif所示：