JS-DOM编程-05-复选框的全选与取消全选

2021/8/7 17:08:02

编程Tag： 全选复选框 Dom 选中 checked 05 选框 hobbys

本文主要是介绍JS-DOM编程-05-复选框的全选与取消全选，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JS-DOM编程-05-复选框的全选与取消全选

1.当点击全选框时，选中所有复选框

复选框对象的checked属性代表复选框是否被选中：

如果值为true，则表示复选框被选中
如果值为false，则表示复选框未被选中

我们可以利用checked属性来实现功能。

在全选框中设置一个click事件，当点击全选框时，遍历所有复选框对象，

将全选框的checked属性值赋给所有复选框的checked属性。

<!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>复选框的全选与取消全选</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            //获取所有复选框对象，返回一个数组
            var hobbys = document.getElementsByName("hobby");
            //获取全选框对象
            var chooseAllElt = document.getElementById("chooseAll");
            //当点击全选框时，将全选框的checked值赋给所有复选框对象的checked
            chooseAllElt.onclick = function() {
                //遍历所有复选框对象
                for (var i = 0;i < hobbys.length;i++) {
                    hobbys[i].checked = chooseAllElt.checked;
                }
            }
        }
    </script>
    <input type="checkbox" id="chooseAll">全选<br>
    <input type="checkbox" name="hobby" value="smoke">抽烟<br>
    <input type="checkbox" name="hobby" value="drink">喝酒<br>
    <input type="checkbox" name="hobby" value="firehair">烫头<br>
</body>
</html>

2.当所有复选框都被选中时，将全选框选中

当所有复选框都被选中时，将全选框选中的条件是：

复选框总数量=被选中的复选框数量

当点击任意一个复选框时，将所有的复选框都检查一遍，统计出被选中的复选框数量，然后与复选框总数量相比较。将比较结果赋给全选框的checked属性。

由于要实现点击任意一个复选框时，都触发检查函数，所以要先遍历一遍复选框数组，将检查函数注册到每一个复选框的click事件中。

然后在检查函数中，定义一个变量，存储被选中的复选框数量，通过遍历复选框数组，统计被选中的复选框数量，然后将被选中的复选框数量与总复选框数量相比较，将比较结果赋给全选框的checked属性。

<!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>复选框的全选与取消全选</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            //获取所有复选框对象
            var hobbys = document.getElementsByName("hobby");
            //获取全选框对象
            var chooseAllElt = document.getElementById("chooseAll");
            //当点击全选框时，将所有复选框对象的checked与全选框的checked设为一致
            chooseAllElt.onclick = function() {
                for (var i = 0;i < hobbys.length;i++) {
                    hobbys[i].checked = chooseAllElt.checked;
                }
            }
            //当点击任意一个复选框时，将所有复选框都检查一遍，如果所有复选框都被选上了，那么将全选框打上对钩
            //定义复选框的总数量
            var allCounts = hobbys.length;
            //第一次for循环是在页面加载完毕时执行，目的是将下面的函数注册到每一个复选框的click事件里
            for(var i = 0;i < hobbys.length;i++) {
                hobbys[i].onclick = function() {
                    //定义已经被选上的复选框个数
                    var selectedCounts = 0;
                    //第二次for循环是在点击任意一个复选框时执行，目的是统计所有被选中的复选框数量
                    for(var j = 0;j < hobbys.length;j++) {
                        if(hobbys[j].checked) {
                            selectedCounts++;
                        }
                    }
                    //将复选框的总数量和所有已被选中的复选框数量的比较值赋给全选框的checked属性
                    chooseAllElt.checked = (allCounts == selectedCounts);
                }
            }
        }
    </script>
    <input type="checkbox" id="chooseAll">全选<br>
    <input type="checkbox" name="hobby" value="smoke">抽烟<br>
    <input type="checkbox" name="hobby" value="drink">喝酒<br>
    <input type="checkbox" name="hobby" value="firehair">烫头<br>
</body>
</html>

这篇关于JS-DOM编程-05-复选框的全选与取消全选的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JS-DOM编程-05-复选框的全选与取消全选

JS-DOM编程-05-复选框的全选与取消全选

1.当点击全选框时，选中所有复选框

2.当所有复选框都被选中时，将全选框选中

相关编程文章