全选操作的基本实现全选操作利用到的技术：获取元素方式，绑定事件的方法，获取元素是数组，所以遍历数组，全选全选全选全选全选

<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>
</body>

<script>
    // 1.获取元素
    let checkAll = document.querySelector('#checkAll')
    let all = document.querySelector('.all')
    let cks = document.querySelectorAll('.ck')
    // console.log(checkAll);
    // console.log(all);
    // console.log(ck);

    // 2.绑定点击事件
    checkAll.addEventListener('click', function () {
      // 3.获取全选状态
      let state = checkAll.checked
      console.log(state);

      // 4.遍历ck数组
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = state
      }

    })



    // 5.三个都选中的时候，全选也选中，三个当中有一个没有被选中，全选也取消选中的状态
    // 5.1.当选中的元素个数等于总数，则全选也被选中
    // 5.2.当选中的元素不等于总数，则全选没有被选中


    // cks返回的是一个数组，因为要给每个复选框添加点击事件，需要遍历数组
    for (let i = 0; i < cks.length; i++) {

      // 给每个复选框添加点击事件
      cks[i].addEventListener('click', function () {

        // 选中的数组长度，用伪元素checked模拟出来
        let total = document.querySelectorAll('.ck:checked').length   //选中的长度

        // 判断原数组的长度是否等于选择数组的长度
        if (cks.length == total) {
          checkAll.checked = true       //如果是的话，全选也被选中true
          all.innerText = `取消`
        } else {
          checkAll.checked = false      //如果不是的话，全选不会被选中false
          all.innerText = `全选`
        }


      })
    }

  </script>