WebApi入门第四章（多选框小练习）

本文链接：https://blog.csdn.net/m0_56344602/article/details/119741994

需求分析：

切入点：交互 1.点击上方选择框：让下方选择框列表的checked值与自身保持一致 2.点击下方选择框列表：判断上方选择框列表状态选中：所有的选择框checked值都是true 未选中：只要有一个选择框checked值是false

效果图

完整代码

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

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


        table {
            border-collapse: collapse;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }


        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }


        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>
                <input type="checkbox" id="checkAll" />全选/全不选
            </th>
            <th>地名</th>
            <th>标志建筑</th>
            <th>小吃</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>北京</td>
            <td>天安门</td>
            <td>烤鸭</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>广州</td>
            <td>广州塔</td>
            <td>早茶</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>重庆</td>
            <td>解放碑</td>
            <td>火锅</td>
        </tr>
    </table>
    <script>
        //    分析 当checkall选中的时候所有的小盒子check都要选中 
        // 而所有check选中之后 大盒子才选中
        let checkall = document.getElementById('checkAll');
        let checks = document.querySelectorAll('.check');
        checkall.onclick = function () {
            checks.forEach(function (check) {
                // console.log(1);
                check.checked = checkall.checked;
            })
        };
        checks.forEach(function (check) {
            // 假设所有的check都选中了 
            check.onclick = function () {
                let z = true;
                checks.forEach(function (check) {
                    if (check.checked == false) {
                        z = false;
                    };
                });
                checkall.checked = z;
            }

        })
    </script>
</body>

</html>