js实现checkbox全选与全不选

lululu_

于 2022-07-11 03:45:00 发布

812

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lululu_/article/details/125713015

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>
    <div>
        你爱好的运动是？
        <input id="checkAllBox" type="checkbox">全选/全不选<br>
        <input name="items" type="checkbox" value="足球">足球
        <input name="items" type="checkbox" value="篮球">篮球
        <input name="items" type="checkbox" value="羽毛球">羽毛球
        <input name="items" type="checkbox" value="乒乓球">乒乓球<br>
        <button id="checkAllBtn">全选</button>
        <button id="checkNotAllBtn">全不选</button>
        <button id="checkReverse">反选</button>
        <button id="submit" type="submit">提交</button>
    </div>
    <script>
        // 获取所有items
        var items = document.getElementsByName("items");
        var len = items.length;

        // 获取全选全不选按钮元素
        var checkAllBox = document.getElementById("checkAllBox");

        //全选按钮
        var checkAllBtn = document.getElementById("checkAllBtn");
        checkAllBtn.onclick = function() {
            // 设置所有多选框为选中
            setTrueOrFalse(true);
            // 设置全选/全不选多选框为选中
            checkAllBox.checked = true;
        }

        //全不选按钮
        var checkNotAllBtn = document.getElementById("checkNotAllBtn");
        checkNotAllBtn.onclick = function() {
            setTrueOrFalse(false);
            checkAllBox.checked = false;
        }

        //反选
        var checkReverse = document.getElementById("checkReverse");
        checkReverse.onclick = function() {
            for(let i = 0; i < len; i++) {
                items[i].checked = !items[i].checked;
            }
            checkAllBox.checked = checkStatus();
        }

        // 提交
        var submitBtn = document.getElementById("submit");
        submitBtn.onclick = function() {
            for(let i = 0; i < len; i++){
                if(items[i].checked) {
                    alert(items[i].value)
                }
            }
        }

        // 全选全不选box
        checkAllBox.onclick = function() {
            // 在事件的响应函数中，响应函数是给谁绑定的this就是谁
            setTrueOrFalse(this.checked)
        }

        // 为四种球设置单击事件，每次点击都检查当前按钮的状态，与全选全不选按钮绑定
        for(let i = 0; i < len; i++) {
            items[i].onclick = function() {
                checkAllBox.checked = checkStatus();
            }
        }

        // 提取循环,设置所有球类按钮的状态为 status
        function setTrueOrFalse(status) {
            for(let i = 0; i < len; i++) {
                items[i].checked = status;
            }
        }

        // 提取检查每个按钮的状态，全选则返回true,否则返回false
        function checkStatus() {
            for(let j = 0; j < len; j++){
                if(!items[j].checked) {
                    return false;
                }
            }
            return true;
        }
    </script>
</body>
</html>