复选框全选和取消全选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>
相关推荐
Evand J4 分钟前
【MATLAB例程】AOA与TDOA混合定位例程,适用于三维环境、4个锚点的情况,附下载链接
开发语言·matlab
机器视觉知识推荐、就业指导4 分钟前
Qt 与Halcon联合开发八: 结合Qt与Halcon实现海康相机采图显示(附源码)
开发语言·数码相机·qt
10年前端老司机4 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星5 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构7 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚8 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin9 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive10 分钟前
原型与原型链到底是什么?
javascript
lichenyang45310 分钟前
React项目(移动app)
前端
用户618482402195111 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端