复选框的全选和取消

简介: 该博客文章提供了HTML和JavaScript代码实现复选框的全选和取消全选功能,并展示了测试结果的截图。

文章目录

    • 1、代码实现
    • 2、测试结果

1、代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
    </head>

    <body>

        <script type="text/javascript">
            window.onload = function() {
                var first = document.getElementById("first"); //获取
                var aihaos = document.getElementsByName("A"); //通过name获取
                first.onclick = function() {
                    for(var i = 0; i < aihaos.length; i++) {
                        aihaos[i].checked = first.checked;
                    }

                }

                //当复选框全部选中的时候第一个复选框才会显示选中
                var all = aihaos.length;
                for(var i = 0; i < aihaos.length; i++) {
                    aihaos[i].onclick = function() {
                        var currentsum = 0;
                        for(var i = 0; i < aihaos.length; i++) {
                            if(aihaos[i].checked) {
                                currentsum++;
                            }
                        }

                        first.checked = (currentsum == all);

                    }

                }
            }
        </script>

        <input type="checkbox" id="first" /><br />
        <input type="checkbox" name="A" value="smoke" />吸烟<br />
        <input type="checkbox" name="A" value="drink" />喝酒<br />
        <input type="checkbox" name="A" value="play" />玩游戏<br />

    </body>

</html>

2、测试结果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章
|
3月前
点击全选获取所有复选框
点击全选获取所有复选框
27 1
|
1月前
|
大数据 云计算
复选框
【10月更文挑战第1天】复选框。
29 2
|
3月前
点击全选,使所有复选框被选中
点击全选,使所有复选框被选中
45 0
|
XML Java API
按钮和复选框控件
按钮和复选框控件
88 0