【原生js】实现checkbox复选框的全选与反选

最新推荐文章于 2024-05-21 18:30:03 发布

想做一只快乐的修狗

最新推荐文章于 2024-05-21 18:30:03 发布

阅读量2.5k

点赞数 3

文章标签： javascript 前端 html dom

本文链接：https://blog.csdn.net/weixin_44109827/article/details/124880548

版权

1. 思路

点击全选框，则下面的复选框全部选中；取消全选框，下面的复选框全部取消选中；
只有选中下面的所有复选框以后，才会选中全选框；否则，只要下面存在一个未被选中的复选框，则全选框不会被选择；

2. 代码实现

2.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
      width: 500px;
      margin: 100px auto;
      text-align: center;
      border-collapse: collapse;
      font-size: 14px;
    }
    thead tr {
      height: 30px;
      background-color: skyblue;
    }
    tbody tr{
      height: 30px;
    }
    tbody td{
      border-bottom: 1px solid #7d7d7d;
      font-size: 12px;
      color: blue;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll">全选</input>
          </th>
          <th>商品</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox"></input>
          </td>
          <td>豆浆</td>
          <td>3元</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox"></input>
          </td>
          <td>油条</td>
          <td>5元</td>
        </tr></tr>
        <tr>
          <td>
            <input type="checkbox"></input>
          </td>
          <td>鸡腿</td>
          <td>10元</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    // 1. 点击全选按钮，其他复选框也跟着全选；取消的话，同样的；
    // 1.1 获取元素
    var j_cbAll = document.getElementById('j_cbAll');
    var j_tbs = document.getElementById('j_tb').querySelectorAll('input');
    // 1.2 注册时间
    j_cbAll.onclick = function() {
      // this.checked 获取 j_cbAll的选中状态 ，选中（true）、未选中（false）
      console.log(this.checked);
      for(var i =0;i<j_tbs.length;i++) {
        j_tbs[i].checked = this.checked;
      }
    }

    // 2. 下面的复选框影响上面的（只有全选中时，才会选中上面的）
    for(var i=0; i<j_tbs.length;i++) {
      j_tbs[i].onclick = function() {
        // flag控制全选按钮是否选中
        var flag = true;
        // 每次点击下面的复选框，都要循环检查下面所有的复选框是否全部被选中
        for(var i =0;i<j_tbs.length;i++) {
          if(!j_tbs[i].checked) {
            // 有一个没选中，则无需将上面的复选框选中，并且跳出循环
            flag = false;
            break;
          }
        }
        j_cbAll.checked = flag;
      }
    }
  </script>
</body>
</html>

2.2 效果

在这里插入图片描述

想做一只快乐的修狗

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
2
评论
【原生js】实现checkbox复选框的全选与反选

1. 思路点击全选框，则下面的复选框全部选中；取消全选框，下面的复选框全部取消选中；只有选中下面的所有复选框以后，才会选中全选框；否则，只要下面存在一个未被选中的复选框，则全选框不会被选择；2. 代码实现2.1 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
复制链接

扫一扫