技術標籤：前端jsjavascript

概述

前端實現表單全選，反選功能的案例還是蠻多的，為了方便以後複用，這裡對其做個總結:

效果圖總覽：

html程式碼塊：

<table>
    <!--    表頭-->
    <thead>
    <tr>
        <td><input type="checkbox"/></td>
        <td>商品名稱</td>
        <td>價格</td>
    </tr>
    </thead>
    <!--    表體-->
    <tbody>
    <tr>
        <td><input type="checkbox"/></td>
        <td>蘋果</td>
        <td>3$</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>西瓜</td>
        <td>4$</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>獼猴桃</td>
        <td>5$</td>
    </tr>
    </tbody>
</table>
 

css樣式程式碼塊：

table {
    margin: 0 auto;
    margin-top: 100px;
    width: 400px;
}

table thead {
    background-color: #0078d7;
}

table tbody {
    background-color: #6ac0da;
}

table thead tr td,
table tbody tr td {
    text-align: center;
}

方式1 js 原生處理

思路：全選/反選核心思想莫過於通過父複選框狀態改變間接改變所有子複選框的狀態，而父複選框的狀態則通過每次對子複選框的狀態的審查來改變。因此整個過程主要涉及到內容為：迴圈遍歷子複選框、複選框的checked值。

// 獲取表頭複選框
var headCheck = document.querySelector('thead').querySelector('input');
// 獲取表體複選框集合
var bodyCheck = document.querySelector('tbody').querySelectorAll('input');

//全選/反選點選事件
headCheck.onclick = function () {
    //根據父複選框狀態改變子複選框狀態
    for (var i = 0; i < bodyCheck.length; i++) {
        bodyCheck[i].checked = this.checked;
    }
}

// 單選/子複選框全選之後觸發事件
for (var i = 0; i < bodyCheck.length; i++) {
    bodyCheck[i].onclick = function () {
        //狀態位
        var flag = true;
        for (var i = 0; i < bodyCheck.length; i++) {
            //複選框沒有選擇
            if(!bodyCheck[i].checked) { //只要有一個子複選框沒有被選上，則父複選框則不被選上
                 flag = false;
            }
        }
        headCheck.checked = flag;
    }
}

 

注意點： flag標誌位，不應該放於子複選框點選處理事件外層，原因：多個子複選框公用一個flag標誌位會導致狀態錯亂，以至於不能正確修改父複選框的狀態。