CheckBox的全选和反选问题

最新推荐文章于 2022-03-07 22:34:54 发布

Cure The World

最新推荐文章于 2022-03-07 22:34:54 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/qq_45062472/article/details/108680575

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

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

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
    <input type="button" value="  反 选  " id="btn">
</div>

<script>
    //全选
    var j_cbAll = document.getElementById('j_cbAll');
    // 获取所有子的checkbox
    var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');
    // 1 点击全选按钮(父的checkbox)的时候，让子的checkbox的选中状态跟父的checkbox保持一致
    // 1.1 获取父checkbox注册点击事件
    j_cbAll.onclick = function () {
        // 1.2 让所有子的checkbox的选中状态跟父的checkbox保持一致
        var i = 0;
        var len=checkboxs.length;
        for (;i < len;i++){
            // 获取每一个checkbox
            var checkbox = checkboxs[i];
            // 让每一个checkbox的选中状态和父的checkbox保持一致
            checkbox.checked = this.checked;
        }
    }



    // 2 给所有的子的checkbox注册点击事件，点击子的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不选中
    // 2.1 给所有的子的checkbox注册点击事件
    var i = 0, len = checkboxs.length;
    for (;i<len;i++){
        checkbox=checkboxs[i];
        // 如果有一个子的checkbox没有选中，父的checkbox也不选中
        // 如果所有的子的checkbox都选中  父的checkbox也选中
        checkbox.onclick = function () {
            //假设所有的子复选框都选中了
            var isCheckedAll = true;
            //判断每个子复选框是否选中
            for (var i=0;i<len;i++){
                // 获取每一个子的checkbox
                checkbox=checkboxs[i];
                // 判断选中状态
                if (!checkbox.checked){
                    // 如果checkbox没有选中，设置isAllChecked= false
                    isCheckedAll=false;
                    break;
                }
            }
            // 设置父的checkbox的选中状态
            j_cbAll.checked=isCheckedAll;
        }
    }



    //反选
    var btn = document.getElementById('btn');
    // 3.1 给反选按钮注册点击事件
    btn.onclick = function () {
        var i = 0;
        var len = checkboxs.length;
        // 3.2 遍历所有子的checkbox 对选中状态取反
        for (; i < len; i++) {
            var checkbox = checkboxs[i];
            checkbox.checked = !checkbox.checked;
        }
        //假设所以的子复选框都选中了
        var isCheckedAll = true;
        //判断每个子复选框是否选中
        for (var i=0;i<len;i++){
            checkbox=checkboxs[i];
            if (!checkbox.checked){
                isCheckedAll=false;
                break;
            }
        }
        // 设置父的checkbox的选中状态
        j_cbAll.checked=isCheckedAll;
    }
</script>
</body>
</html>