实现多选框

yang 发布于 2023-5-30 18:45 阅读：428 JS基础阶段
<!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><input type="checkbox" id="input1" checked />新闻1</p>
        <p><input type="checkbox" id="input2" checked />新闻2</p>
        <p><input type="checkbox" id="input3" />新闻3</p>
        <p><input type="checkbox" id="input4" />新闻4</p>
        <p><input type="checkbox" id="input5" checked />新闻5</p>
        <button id="btn1">全选</button>
        <button id="btn2">取消全选</button>
        <button id="btn3">反选</button>

        <script>
            // 功能一：全选
            // 1.获取相关节点querySelectorAll
            const inputNodes = document.querySelectorAll("input");
            const btn1Node = document.querySelector("#btn1");
            const btn2Node = document.querySelector("#btn2");
            const btn3Node = document.querySelector("#btn3");
            // console.log(inputNodes);
            // 3.给btn1绑定点击事件，点击后触发全选
            btn1Node.onclick = function () {
                // 2.遍历伪数组，让每一项v的checked改为ture
                inputNodes.forEach(function (v) {
                    // console.log(v);
                    v.checked = true;
                });
            };

            // 功能二：取消全选
            btn2Node.onclick = function () {
                // 2.遍历伪数组，让每一项v的checked改为false
                inputNodes.forEach(function (v) {
                    // console.log(v);
                    v.checked = false;
                });
            };

            // 功能三：反选
            btn3Node.onclick = function () {
                // 2.遍历伪数组，让每一项v的checked改为false
                inputNodes.forEach(function (v) {
                    // console.log(v);
                    v.checked = !v.checked;
                });
            };
        </script>
    </body>
</html>
实现多选框
扫描二维码，在手机上阅读