js原生简单全选反选

 //样式

<style>

      table {

        border-collapse: collapse;

        width: 600px;

        margin: auto;

      }

      table,

      tr,

      th,

      td {

        border: 1px solid #000;

        text-align: center;

      }

    </style>

//布局结构

<table>

      <tr>

        <th class="th">

          <input class="all" type="checkbox" />

          全选

        </th>

        <th>商品</th>

        <th>商家</th>

        <th>价格</th>

      </tr>

      <tr>

        <td><input type="checkbox" class="ck" /></td>

        <td>小米手机</td>

        <td>苹果手机</td>

        <td>￥1999</td>

      </tr>

      <tr>

        <td><input type="checkbox" class="ck" /></td>

        <td>小米手机</td>

        <td>苹果手机</td>

        <td>￥1999</td>

      </tr>

      <tr>

        <td><input type="checkbox" class="ck" /></td>

        <td>小米手机</td>

        <td>苹果手机</td>

        <td>￥1999</td>

      </tr>

    </table>

//js实现效果

 <script>

//获取元素

      const all = document.querySelector(".all");

      const ck = document.querySelectorAll(".ck");

//用全选的checke来控制三个小复选框的checked

      all.addEventListener("click", function () {

        for (let i = 0; i < ck.length; i++) {

          ck[i].checked = all.checked;

        }

      });

//循环遍历小复选框

      for (let i = 0; i < ck.length; i++) {

//每个都添加点击事件

        ck[i].addEventListener("click", function () {

//用小复选框的checked来控制大复选框的checked

          all.checked =

            document.querySelectorAll(".ck:checked").length === ck.length;

        });

      }

    </script>