DOM操作案例之--全选与反选

Posted 2020-10-17 Thinkguo

全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。

下面我只就用一个简单的案例做个演示吧。

<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>小米手机</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>ThinkPad</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPhone7</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPhoneX</td>
            <td>9000</td>
        </tr>
        </tbody>
    </table>

 

上面是是html部分代码，做了一个表格。

下面是css代码：

<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>

 

下面是js代码，实现全选反选功能。

<script>
    var all = document.getElementById("j_cbAll");
    var tbody = document.getElementById("j_tb");
    var checkboxes = tbody.getElementsByTagName("input");//下面的单选框
    //点击all 让下面的的选中状态和all一致
    all.onclick = function () {
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = all.checked;
        }
    };

    //让下面的影响上面
    //点击每一个都判断 如果每一个都选中了 all就选中 否则不选中
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].onclick = function () {
            var isCheckedAll = true;
            for (var i = 0; i < checkboxes.length; i++) {
                if (!checkboxes[i].checked) {
                    isCheckedAll = false;
                    break;
                }
            }
            all.checked = isCheckedAll;
        };
    }


</script>

　　

上面就是这个案例的效果了。

当然，这个还可以扩展一下，做成一个购物车的案例。