【JS实现】表单全选和取消全选

昼白 • 2021-09-07 • CSS/HTML/JavaScript • 327 阅读

效果

技术点

没什么技术点，主要看思想

 全选
      分析业务逻辑
        1. 点击全选按钮的时候
          => 如果全选按钮是选中, 那么每一个选项按钮也选中
          => 如果全选按钮是未选中, 那么每一个选项按钮都是未选中
        2. 每一个选项按钮点击的时候
          => 如果所有的选项按钮都是选中, 那么全选按钮选中
          => 只要有任意一个选项按钮未选中, 那么全选按钮未选中
      代码:
        1. 获取元素
          => 全选按钮
          => 所有的选项按钮
        2. 给全选按钮添加一个点击事件
          => 获取全选按钮的选中状态
          => 使用 checked 原生属性
          => 循环遍历 itemBtns, 给里面的每一个 input 设置 checked 属性
          => 我自己是什么就给他们设置成什么
        3. 给 itemBtns 里面的每一个添加一个点击事件
          => 每一个按钮的点击, 都需要判断是不是所有的按钮都是选中
          => 遍历 itemBtns 判断里面每一个是不是都是选中状态
            -> 做一个假设变量, 假设所有的都是选中
            -> 循环遍历
            -> 只要有任何一个是未选中的, 那么把我的假设否定掉
            -> 结束循环
          => 根据我判断的 flag 的值给 全选按钮设置选中状态

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 160px;
      padding: 5px;
      border: 1px solid #333;
      margin: 100px auto;
    }

    .box>div {
      padding: 15px;
    }
  </style>
</head>

<body>

  <div class="box">
    <div class="all">
      全选: <input type="checkbox">
    </div>
    <hr>
    <div class="items">
      选项一: <input type="checkbox"> <br>
      选项二: <input type="checkbox"> <br>
      选项三: <input type="checkbox"> <br>
      选项四: <input type="checkbox"> <br>
    </div>
  </div>

  <script>
    /*
      全选

      分析业务逻辑
        1. 点击全选按钮的时候
          => 如果全选按钮是选中, 那么每一个选项按钮也选中
          => 如果全选按钮是未选中, 那么每一个选项按钮都是未选中
        2. 每一个选项按钮点击的时候
          => 如果所有的选项按钮都是选中, 那么全选按钮选中
          => 只要有任意一个选项按钮未选中, 那么全选按钮未选中

      代码:
        1. 获取元素
          => 全选按钮
          => 所有的选项按钮
        2. 给全选按钮添加一个点击事件
          => 获取全选按钮的选中状态
          => 使用 checked 原生属性
          => 循环遍历 itemBtns, 给里面的每一个 input 设置 checked 属性
          => 我自己是什么就给他们设置成什么
        3. 给 itemBtns 里面的每一个添加一个点击事件
          => 每一个按钮的点击, 都需要判断是不是所有的按钮都是选中
          => 遍历 itemBtns 判断里面每一个是不是都是选中状态
            -> 做一个假设变量, 假设所有的都是选中
            -> 循环遍历
            -> 只要有任何一个是未选中的, 那么把我的假设否定掉
            -> 结束循环
          => 根据我判断的 flag 的值给 全选按钮设置选中状态
    */
    // // 1. 获取元素
    // var allBtn = document.querySelector('.all > input')
    // // querySelectorAll 方法获取的元素集合可以使用 forEach
    // var itemBtns = document.querySelectorAll('.items > input')

    // // 2. 给全选按钮添加点击事件
    // allBtn.onclick = function () {
    //   // 2-2. 获取自己的状态
    //   var type = allBtn.checked

    //   // 2-3. 循环遍历 itemBtns 给他们设置
    //   // for (var i = 0; i < itemBtns.length; i++) {
    //   //   itemBtns[i].checked = type
    //   // }
    //   itemBtns.forEach(function (item) { item.checked = type })
    // }

    // // 3. 给 每一个选项 按钮添加点击事件
    // itemBtns.forEach(function (item) {
    //   // 添加点击事件
    //   item.onclick = function () {

    //     // 3-2. 判断是不是每一个都是选中的
    //     var flag = true
    //     itemBtns.forEach(function (item) {
    //       if (!item.checked) flag = false
    //     })

    //     // 3-3. 给全选按钮设置选中状态
    //     // flag === true, 表示全都选中, 全选按钮选中
    //     // flag === false, 表示没有全都选中, 全选按钮未选中
    //     allBtn.checked = flag
    //   }
    // })
  </script>
</body>

</html>

 

<!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 {
            margin: 0 auto;
        }
        thead {
            background-color: blue;
        }
    </style>
</head>
<body>
    <table border="1px" cellpadding="10px" cellspacing="0" width="400px">
        <thead>
            <tr>
                <td><input type="checkbox" id="tbox"></td>
                <td>商品</td>
                <td>价钱</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Ipad Ari</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <script>
        var tbox = document.querySelector('#tbox');
        var bobox =document.querySelector('tbody').querySelectorAll('input');
        tbox.addEventListener('click', function() {
            for (var i = 0; i < bobox.length; i++) {
                // 这时把全选按钮的状态给子按钮
                bobox[i].checked = this.checked;
            }
        })
        // 给下面全部复选框绑定点击事件
        for (var i = 0; i < bobox.length; i++) {
            bobox[i].addEventListener('click', function() {
                // flag控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查下面的复选框是否全被选中
                for (var i = 0; i < bobox.length; i++) {
                    if (!bobox[i].checked) {
                        flag = false;
                        break;//退出for循环，提高执行效率，只要有一个没被选中，剩下的就无需判断了
                    }
                }
                tbox.checked = flag;
            })
        }
    </script>
</body>
</html>
本站部分文章资源来源于互联网，仅供学习交流，如若要商用，请购买正版！
若不听劝告，网友造成出现一切后果，与本站本人无关
本站有些资源未经测试，请注意网络安全，本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源：https://www.2bcnm.com/3254.htm
THE END
分享
二维码
打赏
海报
【JS实现】表单全选和取消全选
效果 技术点 没什么技术点，主要看思想  全选       分析业务逻辑         1. 点击全选按钮的时候           => 如果全选按钮是选中, 那么每一个选项按钮……
<<上一篇
下一篇>>
文章目录
关闭
目 录