复选框练习题_安卓复选款练习题-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73145804/article/details/127549188

本文探讨了如何使用JavaScript在前端开发中实现复选框的交互功能，包括选中、取消选中、批量操作及验证等操作。通过实例代码解析，帮助读者掌握HTML和JavaScript在创建动态复选框应用中的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Document</title>
</head>

<body>
    <p>请选择你的爱好</p>

    <input type="checkbox" id="all">全选/全不选
    <div id="hobby">
        <input type="checkbox" name="one">打篮球
        <input type="checkbox" name="one">踢足球
        <input type="checkbox" name="one">上网
        <input type="checkbox" name="one">写代码
        <input type="checkbox" name="one">写文档
        <input type="checkbox" name="one">查BUG
    </div>

    <button id="all-a"  onclick="ALL()">全选</button>
    <button id="noall" onclick="NOALL()">全不选</button>
    <button id="reverse" onclick=" rev()">反选</button>
    <script>
        let all = document.querySelector('#all')//全选按钮
        let hobby = document.querySelector('#hobby').getElementsByTagName('input')//所有小选项下的input
        let a1 = document.querySelector('#a1')
        let a2 = document.querySelector('#a2')
        let a3 = document.querySelector('#a3')
        //用hobby包住input实现全选全选
        all.addEventListener('click', name);
        function name() {
            for (let i = 0; i < hobby.length; i++) {
                hobby[i].checked = this.checked //
            }
        }
        //全选
        function ALL(){
            let one =document.getElementsByName('one')
            for (let i = 0; i < one.length; i++) {
                one[i].checked=true;
            }
        }
        //全不选
        function NOALL(){
            let one =document.getElementsByName('one')
            for (let i = 0; i < one.length; i++) {
                one[i].checked=false;
            }
        }
        //反选
        function rev(){
            let one =document.getElementsByName('one')
            for (let i = 0; i < one.length; i++) {
                if (one[i].checked==false) {
                    one[i].checked=true;
                }else{
                    one[i].checked=false;
                }
            }
        }
    </script>
</body>
</html>

<!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>Document</title>
</head>
<body>
    <p>兴趣爱好</p>
    <p>
        <input type="checkbox" id="chk">全选/全不选
    </p>
    <label>
        <input type="checkbox" name="hobby">游泳
    </label>
    <label>
        <input type="checkbox" name="hobby">打篮球
    </label>
    <label>
        <input type="checkbox" name="hobby">踢足球
    </label>
    <label>
        <input type="checkbox" name="hobby">上网
    </label>
    <label>
        <input type="checkbox" name="hobby">写代码
    </label>
    <label>
        <input type="checkbox" name="hobby">写文档
    </label>
    <label>
        <input type="checkbox" name="hobby">查BUG
    </label>
    <br><br>
    <button id="btn_all">全选</button>
    <button id="btn_notALL">全不选</button>
    <button id="btn_unALL">反选</button>

    <script>
        let all = document.getElementById('btn_all')
        let notall = document.getElementById('btn_notALL')
        let unall = document.getElementById('btn_unALL')
        //全选
        all.addEventListener('click', getAll)
        function getAll() {
            let cb_arr = document.getElementsByName('hobby')//getElementsByName  将name全部选过来
            // console.log(arr)
            for (let i = 0; i < cb_arr.length; i++) {
                cb_arr[i].checked = true
            }
        }
        //全不选
        notall.addEventListener('click', notAll)
        function notAll() {
            let cb_arr = document.getElementsByName('hobby')//getElementsByName  将name全部选过来
            // console.log(arr)
            for (let i = 0; i < cb_arr.length; i++) {
                cb_arr[i].checked = false
            }
        }
        //反选
        unall.addEventListener('click', function () {
            let cb_arr = document.getElementsByName('hobby')//getElementsByName  将name全部选过来
            // console.log(arr)
            for (let i = 0; i < cb_arr.length; i++) {
                cb_arr[i].checked = !cb_arr[i].checked
            }
        })
        //用复选框控制全选/全不选
        let chk = document.getElementById('chk')
        chk.addEventListener('change', function () {
            if (this.checked) {
                getAll()
            } else {
                notAll()
            }
        })
    </script>
</body>
</html>