JavaScript：如何实现全选和反选

 **全选**

（1）对全选按钮获取点击事件；

（2） 我们需要做的就是把全选框的checked 给下面三个小按钮。因为三个按钮在伪数组里面，我们需要遍历的方式，挨个取出来，依次给值；

（3）当我们的全选按钮处于选中状态，改为取消。

      // 获取元素
      let all = document.querySelector("#checkAll");
      let cks = document.querySelectorAll(".ck");
      let span = document.querySelector("span");

      // 全部勾选
      all.addEventListener("click", function () {
        for (i = 0; i < cks.length; i++) {
          cks[i].checked = all.checked;
        }

        // 全选取消文字变换
        if (all.checked) {
          span.innerHTML = "取消";
        } else {
          span.innerHTML = "全选";
        }
      });

**反选**

（1）遍历小按钮，同时给多个元素绑定相同点击事件；

（2）只要点击任何一个小按钮，都要遍历所有的小按钮，看看是不是有没选中的，如果有则设置全选按钮为未选中，并退出循环，结束函数；

（3）当我循环结束但没有退出函数，说明都被选中了，则全选按钮要选中。

      // 反选
      for (let i = 0; i < cks.length; i++) {
        // 绑定事件
        cks[i].addEventListener("click", function () {
          // 只要点击任何一个小按钮，都要遍历所有的小按钮
          for (let j = 0; j < cks.length; j++) {
            if (cks[j].checked === false) {
              // 如果有false 则退出循环 结束函数
              all.checked = false;
              span.innerHTML = "全选";
              return;
            }
          }
          // 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
          all.checked = true;
          span.innerHTML = "取消";
        });
      }