pink老师 JS-关于购物车全选取消全选反选功能

最新推荐文章于 2023-06-26 10:41:59 发布

南冠草LovEason

最新推荐文章于 2023-06-26 10:41:59 发布

阅读量430

点赞数

文章标签： html 前端 javascript

原文链接：https://blog.csdn.net/m0_47559177/article/details/120639842

版权

实现功能：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化

<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" />
          <label for="checkAll" class="all">全选</label>
        </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>
      //  选择标签
      let checkAll = document.querySelector("#checkAll");
      let all = document.querySelector(".all");
      let cks = document.querySelectorAll(".ck");
      // 绑定事件
      checkAll.addEventListener("click", function () {
        // 如果点击让小的复选框跟全选状态一样
        for (let i = 0; i < cks.length; i++) {
          cks[i].checked = checkAll.checked;
        }
        if (checkAll.checked) {
          all.innerHTML = "取消";
        } else {
          all.innerHTML = "全选";
        }
      });

      // 给每一个小的复选框绑定事件
      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) {
              checkAll.checked = false;
              all.innerHTML = "全选";
              // 一但有一个是没有选中的状态 就让全选为false 并return 退出函数
              return;
            }
          }
          // 否则 都选中的话 就让全选选中 并且内容是取消的文字
          checkAll.checked = true;
          all.innerHTML = "取消";
        });
      }
    </script>
  </body>
</html>