javaScript 使用數組every方法實現全選按鈕

實現過程

初始化函數

1、獲取所有多選框，形成列表

2、將列表轉換為數組

3、遍歷所有多選框數組，給每個多選框增加點擊事件

4、將最頭部的全選框賦值給all

body代碼實現

<code>/<code>

js代碼實現

<code>var cks,all;
init();
function init(){
      // 獲取所有input標籤存儲到cks列表中
      cks=document.getElementsByTagName("input");
      // 將cks列表轉換為數組覆蓋cks變量
      cks=Array.from(cks);
      // 循環這個數組
      for(var i=0;i<cks.length>             // 每個多選框添加點擊事件,當點擊時執行clickHandler函數
             cks[i].onclick=clickHandler;
      }
      // 刪除數組的最頭部的元素並且設置給all變量，最頭部這個元素是全選那個多選框
      all=cks.shift();
      // 剩餘cks數組中沒有全選的那個多選框了
}/<cks.length>/<code>

當點擊每個多選框是執行下面的方法

1、判斷是否是全選框，如果是全選框，給其他每個多選框設置選中狀態和全選框相同

2、如果點擊不是全選框，檢測是否每一個多選框都是選中狀態，如果是，設置全選框選中，反之，不選中

<code>function clickHandler(){
            // 如果點擊的元素與all變量相同，all變量就是全選的那個多選框
            // this在點擊事件中指被點擊的元素
            // 當點擊全選框，就會執行這個事件，all.checked會自動變化，
            // 比如勾選中，all.checked就會自動變為true
      if(this===all){
      // 除了全選多選框以外所有的其他多選框的選中狀態必須和全選多選框的選中狀態一直
      // all.checked  這個就是全選多選框的選中狀態 這個結果是true或者false
      // true就是選中，false就是未選中，所有的多選框都具備這個屬性，
      // 這個屬性即可獲取又可以設置
      // cks是除了全選框以外的其他所有多選框的數組
           cks.forEach(function(item){
                    // 這裡的item就是除了全選框以外的其他的每個多選框
                    item.checked=all.checked;
           })
            }else{
                // 如果點擊是除了全選以外的其他多選框 

                // cks.every遍歷cks數組的每個元素，每個多選框
                // every方法，如果遇到有元素返回了false就直接返回false，如果沒有遇到最後返回true
                // 全選框的選中狀態就變成查看其他元素中是否沒有選中的元素，
                // 如果每個元素都選中,那麼全選框也被選中
                all.checked=cks.every(function(item){
                    // 返回每個多選框的checked狀態，就是當前這個多選框是否被選中
                    // 如果被選中就會把true返回出去
                    // 如果沒選中就會把false返回出去
                    return item.checked;
               })
            }
}/<code>

閱讀更多 栗子紀 的文章

關鍵字: 按鈕 數組 全選