Js实现购物车全选反选小案例Js webapi模拟购物车全选反选，三种方法，布尔值判断法，长度法，伪类选择器筛选，小案

<!DOCTYPE html>

<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>
    let checkAll = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let all = document.querySelector('.all')
    // 全选
    checkAll.addEventListener('click', function () {
      cks.forEach(function (value, index) {
        value.checked = checkAll.checked
      })
      all.innerHTML = this.checked ? '取消' : '全选'
    })

    //反选,布尔值
    // for (let i = 0; i < cks.length; i++) {
    //   cks[i].addEventListener('click', function () {
    //     let flag = true
    //     cks.forEach(function (value, index) {
    //       if (value.checked === false) {
    //       }
    //         flag = false
    //     })
    //     checkAll.checked = flag
    //     all.innerHTML = flag ? '取消' : '全选'
    //   })
    // }
    // addEventListener

     //2.反选，长度判断
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        let num = 0
        cks.forEach(function (v, i) {
          if (v.checked) num++
        })
        if (num === cks.length) {
          checkAll.checked = true
          all.innerHTML = '取消'
        } else {
          checkAll.checked = false
          all.innerHTML = '全选'
        }
      })
    }

    //3.反选，长度判断，直接利用伪类选择器将选中的选择器筛选出来 '.ck:checked'
    // for (let i = 0; i < cks.length; i++) {
    //   cks[i].addEventListener('click', function () {
    //     let count = document.querySelectorAll('.ck:checked').length
    //     if (count === cks.length) {
    //       checkAll.checked = true
    //       all.innerHTML = '取消'
    //     } else {
    //       checkAll.checked = false
    //       all.innerHTML = '全选'
    //     }
    //   })
    // }
  </script>
</body>

</html>