【案例】表单的全选取消全选功能 

<!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 {
        font-size: 14px;
        text-align: center;
        /* 字体居中 */
        border-collapse: collapse;
        /* 合并边框 */
        border: 1px solid #ccc;
      }
      table thead {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div>
      <table>
        <!-- 表头部分 -->
        <thead>
          <tr>
            <th><input type="checkbox" id="j_cbAll" /></th>
            <th>商品</th>
            <th>价钱</th>
          </tr>
        </thead>
        <!-- 内容部分 -->
        <tbody id="j_tb">
          <tr>
            <td><input type="checkbox" /></td>
            <td>iphone8</td>
            <td>5000</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>iphone8</td>
            <td>5000</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>iphone8</td>
            <td>5000</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>iphone8</td>
            <td>5000</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>iphone8</td>
            <td>5000</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      // 获取元素
      var j_cbAll = document.getElementById("j_cbAll");
      var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");
      //   注册事件
      j_cbAll.onclick = function () {
        //   首先获得j_cbAll的复选框状态，然后下面table的复选框就复制thead的
        console.log(this.checked);
        // 全选和取消全选都是遍历使得下面的每一个都和上面一样的状态，所以循环
        for (var i = 0; i < j_tbs.length; i++) {
          j_tbs[i].checked = this.checked;
        }
      };
      //   下面的复选框需要全部选中，上面全选框才会勾选。
      //   这个时候需要一个变量flag
      //循环注册事件
      for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
          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>
posted @   missSherry1014  阅读(126)  评论(4)  编辑  收藏  举报
相关博文：
· 操作元素--修改表单属性
· 案例-------显示隐藏密码明文
· 按钮全选和取消全选
· 添加和删除背景操作-41
· JS实现表单全选以及取消全选实例
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示