JavaScript實現表單全選或反選效果

Posted on by

本文實例為大傢分享瞭JavaScript實現表單全選或反選的具體代碼，供大傢參考，具體內容如下

表單中常常會用到checkbox復選框，通過復選框做出的列表全選或全不選的效果也是很常見的，比如購物車的商品列表，所以本篇也是對這一種常見功能的選擇效果及其底層的實現思路及代碼進行介紹、演示與分析，下面上JS代碼：

<script>
        // 表單的全選與全不選案例：註：checkbox復選框的checked屬性值為true則為選中狀態，為false則為未選中狀態
        var j_cbAll = document.getElementById('j_cbAll');   // 獲取全選按鈕
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 獲取所有input復選框
        // 註冊事件
        // 1.全選按鈕的事件
        j_cbAll.onclick = function () {
            // this.checked可以獲取當前復選框的狀態返回值為true或false
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;    // 讓tbody裡的復選框每一個的checked的值都等於當前全選按鈕的checked的值，所以它們的狀態就會一致瞭
            }
        }
        // 2.tbody裡面的復選框的事件：下面全選中瞭則全選按鈕也要為選中狀態，若有至少一個未選中則全選按鈕也為未選中狀態，註意：tbody裡面的復選框每一次被點擊都需要做判斷，看是否所有的復選框都被選中瞭
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                // flag 用於控制全選按鈕是否選中
                var flag = true;
                // 每次點擊下面的復選框都要循環檢查4個復選框是否全被選中瞭
                for (var i = 0; i < j_tbs.length; i++) {
                    console.log('---'+j_tbs[i].checked);
                    if (j_tbs[i].checked == false) {  // 有一個按鈕沒有被選中就執行內部代碼修改flag的值為false
                        flag = false;
                        break;  // 退出裡層for循環，這樣可以提高執行效率，因為隻要有一個沒有被選中，剩下的就無需再判斷瞭
                    }
                }
                j_cbAll.checked = flag; // 循環結束後將flag的值給全選按鈕
            }
        }
</script>

執行代碼截圖：

點擊全選時：再點擊一次：

當選中下方的復選框時：

註：下方的四個復選框沒有被全選則上方的全選按鈕不會被選中。

內部JS實現思路主要分為兩部分：第一部分是“全選”按鈕的功能，當它為選中時那麼下面的所有復選框的checked = true，註意：這個值是本功能實現的關鍵，若“全選”按鈕為未選中狀態時則它的checked的值為false，所以再把這個值賦值給下面所有的子復選框即可；第二部分是下面的子復選框的點擊選中功能以及它們的狀態一起決定的“全選”按鈕的狀態，下面全選中瞭則全選按鈕也要為選中狀態，若有至少一個未選中則全選按鈕也為未選中狀態，註意：子復選框的每一次被點擊都需要做判斷，看是否所有的復選框都被選中瞭。（建議結合代碼分析，代碼內含詳細註釋解析）

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：