JavaScript:如何实现全选和反选

JavaScript:如何实现全选和反选_第1张图片

 **全选**

JavaScript:如何实现全选和反选_第2张图片

(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 = "全选";
        }
      });

**反选**

JavaScript:如何实现全选和反选_第3张图片

(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 = "取消";
        });
      }

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