复选框全选和取消全选demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML复选框的全选和取消全选</title>
</head>

<body onload="bindClick()">
    <script>
        // function checkAll() {
        //     var firstCheck = document.getElementById("firstCheck");
        //     console.log(firstCheck)
        //     //获取选中状态
        //     console.log(firstCheck.checked)
        //     var aihaos = document.getElementsByName("aihao")
        //     if (firstCheck.checked) {
        //         //全选
        //         for (var i = 0; i < aihaos.length; i++) {
        //             aihaos[i].checked = true
        //         }
        //     } else {
        //         for (var i = 0; i < aihaos.length; i++) {
        //             aihaos[i].checked = false
        //         }
        //     }
        // }


        function checkAll() {
            var firstCheck = document.getElementById("firstCheck")
            var aihaos = document.getElementsByName("aihao")
            for (var i = 0; i < aihaos.length; i++) {
                aihaos[i].checked = firstCheck.checked
            }
        }


        //页面加载完成之后,为每个name是aihao的checkbox都绑定了点击事件
        function bindClick() {
            var aihaos = document.getElementsByName("aihao")
            console.log(aihaos.length)
            for (var i = 0; i < aihaos.length; i++) {
                aihaos[i].onclick = function () {//这样就为每个name是aihao的checkbox都绑定了点击事件
                    var count = aihaos.length
                    var checkNum = 0
                    for (var i = 0; i < aihaos.length; i++) {
                        if (aihaos[i].checked) {
                            checkNum++;
                        }
                    }
                    if (checkNum == count) {
                        document.getElementById("firstCheck").checked = true;
                    } else {
                        document.getElementById("firstCheck").checked = false;
                    }
                }
            }
        }
    </script>
    <input type="checkbox" id="firstCheck" onclick="checkAll()" />全选<br>
    <input type="checkbox" name="aihao" value="0" />抽烟<br>
    <input type="checkbox" name="aihao" value="1" />喝酒<br>
    <input type="checkbox" name="aihao" value="2" />烫头<br>
    <input type="checkbox" name="aihao" value="3" />跳舞<br>
    <input type="checkbox" name="aihao" value="4" />唱歌<br>
    <input type="checkbox" name="aihao" value="5" />睡觉<br>
    <input type="checkbox" name="aihao" value="6" />打豆豆<br>
</body>

</html>
相关推荐
时光の尘12 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭26 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师27 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者31 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟32 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟1 小时前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网