js实现全选与反选

灰灰_Glory

已于 2023-04-04 22:44:09 修改

阅读量156

点赞数

分类专栏：前端小案例文章标签： javascript html css html5 css3

于 2023-04-04 12:53:26 首次发布

本文链接：https://blog.csdn.net/qq_53207975/article/details/129950201

版权

前端小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

全选

1. 全选复选框点击，可以得到当前按钮的 checked

2. 把下面所有的小复选框状态checked设置和全选复选框一致

反选

1. 遍历下面的所有的checkbox，添加点击事件

2. 检查小复选框的选中个数，是不是等于小复选框总的个数

3. 把结果给全选按钮

4. 利用css复选框选择器 input:checked

<!DOCTYPE html>

<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"> <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>

    const checkAll = document.querySelector('#checkAll')
    const cks = document.querySelectorAll('.ck')

    // 1. 全选
    //  点击全选按钮 全选与取消全选时 下面每个item的checkbox的checked与全选按钮的checked属性值保持一致
    checkAll.addEventListener('click', function () {
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = this.checked
      }
    })

    // 2. 反选
    for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {

        // 判断被选中的复选框的长度是否等于全部复选框的长度 将boolean值赋给checkAll.checked
        // 用到C3的伪类选择器 document.querySelectorAll('.ck:checked') 选择小复选框中被选中的dom元素
        checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
      })

    }
  </script>
</body>

</html>