JS 单选按钮全选与取消全选

单选按钮全选与取消全选

效果图：


点击表格左上角的单选按钮，全选或者取消：
左上角的单选按钮：all (id名称)
下面的单选按钮：boxs (class名称)
原理：

1. 给all一个click点击事件，

2. 判断all是否被选中：
   ①：如果all被选中，那么将下面所有的boxs，以循环的方式设置 checked = true；
   ②：如果all不被选中，那么将下面所有的boxs，以循环的方式设置 checked = false；
   特别注意：不要给双引号 因为之前加了双引号，导致取消全选实现，但是全选没问题，我还以为是 all=onlick(function(){}) 与 all.addeventListener（“click”,function (){}）) 的问题，结果用两种方式做了一遍，做第二遍的时候没加双引号就能实现了，吐槽一句，JS语法真TM混乱

3. 贴出代码：
   ①、第一种方式：

    window.addEventListener("load", function () {
           // 全选与取消全选
           var all = document.getElementById("all");//左上角的单选按钮
           var boxs = document.getElementsByClassName("box");//下面的单选按钮
           all.addEventListener("click", function () {
                  if (all.checked){
                      for (let i = 0; i <boxs.length; i++) {
                          box = boxs[i];
                          box.checked= true;
                      }
                  } else {
                      for (let i = 0; i <boxs.length; i++) {
                          box = boxs[i];
                          box.checked= false;
                      }
                  }
           });
   
   
       });
   

   ②、第二种方式：

    window. onload = function () {
           // 全选与取消全选
           var all = document.getElementById("all");
           var boxs = document.getElementsByClassName("box");
           all.onclick = function () {
               if (all.checked){
                   for (let i = 0; i <boxs.length; i++) {
                           box = boxs[i];
                           box.checked= true;
                   }
               }else {
                   for (let i = 0; i <boxs.length; i++) {
                       box = boxs[i];
                       box.checked= false;
                   }
               }
           }
   
       }