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>

閱讀更多 栗子紀 的文章

關鍵字: 按钮 JavaScript 数组