JavaScript 表格全选与反选

Hi，本文展示如何使用JavaScript实现表格的全选与反选状态，本文为本人自己摸索的内容（编程小白），因此展示的内容、代码语法可能不正确，还请理解（李姐万岁）

一、效果展示

二、创建HTML结构

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>表格全选案例</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
</style>
</head>

<body>
  <div id="" class="wrap">
    <table id="tb">
      <thead>
        <tr>
          <th><input type="checkbox" id="j_cbAll" /></th>
          <th>菜名</th>
          <th>饭店</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td><input type="checkbox" /></td>
          <td>红烧肉</td>
          <td>江南饭店</td>
          <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td>蛋炒饭</td>
          <td>小饭店</td>
          <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td>排骨</td>
          <td>前进饭店</td>
          <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td>红烧鱼</td>
          <td>月亮饭店</td>
          <td><a href="javascript:;">删除</a></td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

三、Js事件

当点击全选框时，下面的分选框也全部选中，当其中有一个分选框没被选中时，全选框也不被选中

首先获取全选框元素与四个分选框元素。

let j_cbAll = document.getElementById("j_cbAll");
let j_tbs = document.querySelectorAll('#j_tb input');

在绑定全选框的点击事件内使用For循环来遍历分选框的点击事件，当全选框选中时，遍历的分选框也全部选中。

j_cbAll.addEventListener('click', function () {
    for (let i = 0; i < j_tbs.length; i++) {
      j_tbs[i].checked = this.checked;
    }
  })

然后在使用For循环再次遍历分选框点击事件，并获取状态为选中状态下的分选框个数，然后判断选中的分选框个数与分选框的个数是否一致，如一致则全选框为选中状态，否则反之。

for (let i = 0; i < j_tbs.length; i++) {
    j_tbs[i].addEventListener('click', function () {
      let checkedLength = document.querySelectorAll('#j_tb input:checked').length;
      if (checkedLength == j_tbs.length) {
        j_cbAll.checked = true;
      } else {
        j_cbAll.checked = false;
      }
    })
  }

四、完整代码

OK，本文到此结束，以上内容均为本人所学知识，学艺不精，如有错误还请理解。

温馨提示：最后更新于2024-03-28 00:13:22，某些文章具有时效性，若有错误或已失效，请评论反馈。

版权声明 1、本网站名称：北牧日记
2、本站永久网址：www.imbeimu.top
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们进行更新。

THE END

网络技术
# JavaScript

JavaScript 表格全选与反选

一、效果展示

二、创建HTML结构

三、Js事件

四、完整代码

请登录后发表评论