超级简单的全选反选

前端开发洋洋

于 2024-08-10 19:50:08 发布

阅读量192

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Java_Coder2021/article/details/141095323

参考黑马

https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=105&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=ed7ea38c90ed7a2d62c11f3dce1f109ahttps://www.bilibili.com/video/BV1Y84y1L7Nn/?p=105&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=ed7ea38c90ed7a2d62c11f3dce1f109a

<!DOCTYPE html>

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      const checkAll = document.querySelector("#checkAll")
      const cks = document.querySelectorAll(".ck")

      //全选框控制小复选框
      checkAll.addEventListener("click", function () {
        //得到当前全选框的选中状态 this.checked
        //得到所有的小复选框，让小复选框的checked=全选框的checked
        for (let i = 0; i < cks.length; i++) {
          cks[i].checked = checkAll.checked // this.checked，this出现在函数里面，for不算函数，所以此处也可以用this
        }
      })

      //小复选框控制全选框
      //给所有的小复选框添加点击事件
      for (let i = 0; i < cks.length; i++) {
        cks[i].addEventListener("click", function () {
          //判断 选中的小复选框的个数 是否等于 总的小复选框个数
          //一定要写到点击的里面，这样才能每次获得最新的个数
          /*           if (document.querySelectorAll(".ck:checked").length === cks.length)
            checkAll.checked = true
          else checkAll.checked = false */
          checkAll.checked =
            document.querySelectorAll(".ck:checked").length === cks.length
        })
      }
    </script>
  </body>
</html>