购物全选反选小demo，主要内容JS部分![image.png](https://p3-juejin.byteimg.c


<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>10-全选反选案例</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>
      // 1.获取元素
      // 1.1 获取全选复选框
      let checkAll = document.querySelector('#checkAll')
      // 1.2 获取文本容器
      let all = document.querySelector('.all')
      // 1.3 获取其它的复选框
      let cks = document.querySelectorAll('.ck')

      // 2.实现全选和全不选
      // 用全选复选框的状态，赋值给下面的所有复选框
      checkAll.addEventListener('click', function() {
        // 2.1 先获取当前全选复选框经过这一次单击之后的状态
        let state = checkAll.checked
        // 2.2 将状态赋值给下面的所有复选框，伪数组需要遍历
        cks.forEach(function(ele, index) {
          ele.checked = state
        })
        all.innerText = state ? '取消' : '全选'
      })

      // 设置一个全局的标记
      for (let i = 0; i < cks.length; i++) {
        cks[i].addEventListener('click', function() {
          // 实现方式就是获取当前被选中的 复选框的数量，与总数进行比较
          // .ck:checked: 找到匹配的元素，只会匹配被选中的复选框
          let count = document.querySelectorAll('.ck:checked').length
          if (count === cks.length) {
            checkAll.checked = true
            all.innerText = '取消'
          } else {
            checkAll.checked = false
            all.innerText = '全选'
          }
        })
      }
    </script>  `
  </body>
</html>