js实现全选，反选的逻辑![image.png](https://p3-juejin.byteimg.com/tos-c

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/返选</title>
    <style>
        body,
        dl,
        dt,
        dd,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Tahoma;
            font-size: 12px;
        }

        label,
        input,
        a {
            vertical-align: middle;
        }

        label {
            padding: 0 10px 0 5px;
        }

        a {
            color: #09f;
            text-decoration: none;
        }

        a:hover {
            color: red;
        }

        dl {
            width: 120px;
            margin: 10px auto;
            padding: 10px 5px;
            border: 1px solid #666;
            border-radius: 5px;
            background: #fafafa;
        }

        dt {
            padding-bottom: 10px;
            border-bottom: 1px solid #666;
        }

        dt label {
            font-weight: 700;
        }

        p {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <dl>
        <dt>
            <input type="checkbox" id="checkAll" />
            <label id="all">全选</label>
            <a href="javascript:;" id="nocheck">反选</a>
        </dt>
        <dd>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（一）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（二）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（三）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（四）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（五）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（六）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（七）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（八）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（九）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（十）</label>
            </p>
        </dd>
    </dl>
    <center>
        1、切换全选/全不选文字；
        <br />
        <br />
        2、根据选中个数更新全选框状态；
    </center>
</body>
<script>
    // 找到全选按钮 所有的子选项卡
    var checkAll = document.getElementById('checkAll')
    var itemArr = document.querySelectorAll('p>input')
    var all = document.getElementById('all')
    checkAll.onclick = function () {
        // 全选按钮点击的时候，旁边的文字变成全不选
        if (checkAll.checked) {
            all.innerHTML = '全不选'
        } else {
            all.innerHTML = '全选'

        }
        for (var i = 0; i < itemArr.length; i++) {
            itemArr[i].checked = checkAll.checked
        }
    }
    // 判断全选状态是否应该发生改变
    function isCheckAll() {
        // 定义子选项卡点击的数量，默认是0,遍历所有子选项，如果遇到被点击的，选中数量加1
        var checkNum = 0;
        for (var i = 0; i < itemArr.length; i++) {
            if (itemArr[i].checked) {
                checkNum++
            }
        }
        // 如果被选中的数量和子选项卡的长度相等，那么全选就被勾上
        if (checkNum === itemArr.length) {
            checkAll.checked = true
        } else {
            checkAll.checked = false
        }
    }
//  每一次点击子选项卡，都执行一遍是否勾选全选按钮的函数
    for (var i = 0; i < itemArr.length; i++) {
        itemArr[i].onclick = isCheckAll
    }
    // 点击了反选，遍历所有的子选项卡，选中状态取反
    var nocheck = document.getElementById('nocheck')
    nocheck.onclick = function () {
        for (var i = 0; i < itemArr.length; i++) {
            itemArr[i].checked = !itemArr[i].checked
        }
        //    当点击了反选按钮的时候，也要执行一遍是否应该勾上全选按钮的函数
        isCheckAll()
    }
</script>

</html>