HTML表格与JS交互实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41670147/article/details/103228876

<!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>
        table {
            border-collapse: collapse;
        }
        
        table th,
        td {
            border: 1px solid #ccc;
            background-color: royalblue;
            width: 100px;
            height: 26px;
            color: #fff;
        }
        
        table td {
            background: #eee;
            color: #333;
        }
        
        table td:first-child {
            text-align: center;
        }
    </style>
</head>

<body>
    <table cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody class="j_cb">
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone 8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone 7</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone 6</td>
                <td>3000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取元素
        var j_cbAll = document.querySelector('#j_cbAll');
        var j_tbs = document.querySelector('.j_cb').querySelectorAll('input');
        //绑定事件
        j_cbAll.onclick = function() {
                for (var i = 0; i < j_tbs.length; i++) {
                    //this.checked 可以得到当前复选框的选中状态如果是true则代表选中，false则未选中
                    j_tbs[i].checked = this.checked;
                }
            }
            //下面复选框全部选中，上面的才能选中：给下面所有的复选框绑定点击事件，每次点击均循环查看下面的复选框是否都已选中，如果没有都选中，上面全选则不选
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                //flag 控制全选按钮是否选中
                var flag = true;
                //每次点击下面的复选框都循环检查是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; //退出for循环，可以提高执行效力，因为有一个没有选中，剩下的就无需循环
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

在这里插入图片描述