复选框的全选和取消

简介: 该博客文章提供了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、测试结果

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

相关文章
|
2月前
点击全选获取所有复选框
点击全选获取所有复选框
25 1
|
2月前
点击全选,使所有复选框被选中
点击全选,使所有复选框被选中
41 0
|
5月前
复选框
复选框。
26 1
|
11月前
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
|
前端开发 C# 数据安全/隐私保护
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
ApeForms一款基于WinForm实现的开源免费商用的UI库,其中提供了一套便于用户交互的临时对话框组件(Dialog),可用于快速创建开发中常见的交互对话框,例如:消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库,而是一套Dialog标准(提供了一套临时弹出对话框的实现标准)。 Dialog是界面开发过程中必不可少的组件,无论是桌面开发、Web前端开发、移动端开发,甚至命令行应用程序中的一次“Yes or No”的输入都可以看做是一次Dialog弹框。
528 0
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选