JS 原生实现复选框全选反选功能

**

JS 原生实现复选框全选反选功能

**

按钮功能实现思路:
全选按钮: 直接将全选按钮的状态赋值给每一个 复选框。
复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就要检测所有的复选框有没有选中,本方法是设置一个开关flag , 来筛选出复选框都选中的情况。
反选按钮功能:直接将此时按钮的状态取反即可。

<body>
   <input type="checkbox" id="checkbox">全选 <input type="button" id="btn" value="反选"><br />
   <input type="checkbox" class="inp"> 张三<br />
   <input type="checkbox" class="inp"> 李四 <br />
   <input type="checkbox" class="inp"> 王五

   <script>
      let checkbox = document.getElementById('checkbox'); //全选按钮
      let btn = document.getElementById('btn'); //反选按钮
      let inp = document.querySelectorAll('.inp'); // 小按钮

      // 设置全选
      checkbox.onclick = function () {
         for (var i = 0; i < inp.length; i++) {
            inp[i].checked = this.checked; // 这个里的 是将全选按钮的状态赋值给所有的inp  
                 }

      };
      // 设置小按钮
      // 要个每一个按钮都要绑定点击事件 所以需要循环 , 
      for (let i = 0; i < inp.length; i++) {
         inp[i].onclick = function () {

            let flag = true;
            // 每点击一个小按钮 就要检测 所有的小按钮是否都全选了 设置了一个 开关
            for (let i = 0; i < inp.length; i++) {

               if (!inp[i].checked) {
                flag = false;
               }
            }

            checkbox.checked = flag;

         }
      };

      // 反选
      btn.onclick = function (){
      
        for(let i = 0 ; i < inp.length ; i++){

           if(inp[i].checked){
              inp[i].checked = false;
              checkbox.checked = false;
           }else{
              inp[i].checked = true;    
              checkbox.checked = true;
           }
        }
      };

   </script>
</body>

实现复选框还有另外一种更加简便的方法:

功能实现思路: 当复选框的选中个数 等于 复选框的个数 时 ,代表复选框已经全部选中,就要将全选按钮选中。

  for (var i = 0; i < inp.length; i++) {

         inp[i].onclick = function () {

            let Select = document.querySelectorAll('.inp:checked').length; // 获得此时选中的复选框的数量

            //复杂点写法: 
            // if (Select == inp.length) {  // 判断:复选框选中的个数 是否等于 复选框的个数 , 返回值 true / false

            //    checkbox.checked = true;

            // } else {

            //    checkbox.checked = false;

            // };

            //简便写法:
            checkbox.checked = Select == inp.length;  // 直接将 判断复选框选中的个数 是否等于 复选框的个数的结果赋值给全选按钮
         }
      };

你可能感兴趣的:(js,javascript,前端)