js中的全选问题

最新推荐文章于 2024-07-22 08:55:10 发布

刘依铭

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量575

点赞数 1

文章标签： javascript 前端 elementui 开发语言 html

本文链接：https://blog.csdn.net/weixin_64105376/article/details/122332483

版权

在做js的习题中，有很多经典的习题，比如本篇文章所讲述的全选问题，全选问题其实就是类似于我们平时在购物车中经常遇见的情形。

全选按钮分为两部分：全选按钮：当该按钮被选中，所有子按钮全部被选中，相同的，若所有子按钮全部被选中，则该按钮被选中，若有一个子按钮没被选中，即该按钮不被选中。

子按钮：当所有子按钮全部被选中，全选按钮才会被选中

本文章将为大家讲解一个简易版本的全选情况。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      全选<input type="checkbox" id="all"><br>
      苹果<input type="checkbox" id="son"><br>
      葡萄<input type="checkbox" id="son"><br>
      猕猴桃<input type="checkbox" id="son"><br>
      橙子<input type="checkbox" id="son"><br>
      柚子<input type="checkbox" id="son"><br>
    <script>
        var all = document.querySelector('#all');
        var sons = document.querySelectorAll('#son');
        all.onclick = function () {
      
            for (var i = 0; i < sons.length; i++) {
                sons[i].checked = this.checked;
            }
        }
        //外层主要是遍历，目的是给每个水果绑定一个点击事件
        for (var j = 0; j < sons.length; j++) {
            sons[j].onclick = function () {
                //设置一个标识，用于决定全选框是否被选中
                var flag = true;
                //内层循环是看是不是四个全是被选中，有一个没选中就是false
                for (var k = 0; k < sons.length; k++) {
                    if (!sons[k].checked) {
                      flag=false;
                    }
                }
                all.checked=flag;
            }
        }
    </script>

</body>
</html>