表单元素的值由value属性控制

选框的状态由checked属性控制

全选反选:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }

        table {
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table cellspacing="20">
            <tr>
                <th><input type="checkbox" value="全选" id="all"></th>
                <th>产品</th>
                <th>价钱</th>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>iphone</td>
                <td>5000</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>iwatch</td>
                <td>2000</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>ipad</td>
                <td>3000</td>

            </tr>
        </table>
        <input type="button" class="inverse" value="反选">
    </div>

    <script>
        var btnAll = document.querySelector('#all');
        var checkArr = document.querySelectorAll('.check');
        var inverse = document.querySelector('.inverse');
        // 全选逻辑
        btnAll.onclick = function () {
            // 获取全选框的 状态
            var status = this.checked;
            // 商品全部选中
            for (var i = 0; i < checkArr.length; i++) {
                checkArr[i].checked = status;
            }
        }

        // 反选逻辑
        inverse.onclick = function () {
            // 如何反选
            // 其实就是原来的状态  取反 !
            for (var i = 0; i < checkArr.length; i++) {
                checkArr[i].checked = !checkArr[i].checked;
            }
            isAll();
        }

        // 全选按钮 如何 联动
        // 核心问题 ,就是判断 是否所有商品 都被选中
        // 下一个问题  什么时候调用 isAll
        function isAll() {
            var status = true;
            for (var i = 0; i < checkArr.length; i++) {
                // 如果遇到一个 checked  是 false  就把 status 改成 false
                if (!checkArr[i].checked) {
                    status = false;
                    break;
                }
            }
            // 修改状态
            btnAll.checked = status;
        }

        // 每个选矿 和 按钮 点击时 都要从执行 isAll 
        for (var i = 0; i < checkArr.length; i++) {
            checkArr[i].onclick = function () {
                isAll();
            }
        }




    </script>
</body>

</html>
文档更新时间: 2021-10-18 14:16   作者:张老师