js实现全选和反选-优快云博客

本文链接：https://blog.youkuaiyun.com/xuehaocyuyan/article/details/118366917

本文介绍了一种在HTML表格中实现全选和反选功能的方法。通过使用JavaScript监听全选按钮和反选按钮的点击事件，可以实现对表格内所有复选框的选择状态进行同步更新。此外，当用户直接点击表格中的任一复选框时，也会自动更新全选按钮的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

购物车表单什么的用得比较多

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选和反选</title>
    <style>
        table {
            border: 1px solid #000;
            width: 400px;
            border-collapse: collapse;
            margin: 100px auto;
        }

        th,
        td {
            border: 1px solid #000;
            padding-left: 5px;
        }

        th {
            background-color: rgb(146, 176, 240);
        }

        td {
            background-color: rgb(167, 160, 160, .2);
        }

        tr:hover {
            background-color: rgb(167, 160, 160, .4);
        }
    </style>
</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th>全选<input type="checkbox" name="" id="check_all"></th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="tbd">
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>小米</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>小米</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>小米</td>
                    <td>3000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="" id=""></td>
                    <td>小米</td>
                    <td>3000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">反选<input type="checkbox" name="" id="reverse"></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script>
        //需求：实现全选和反选
        // 1.获取事件源——check_all reverse btn
        var qx = document.getElementById('check_all');
        var btn = document.getElementById('tbd').querySelectorAll('input');
        var fx = document.getElementById('reverse');
        console.log(qx);
        console.log(btn);
        console.log(fx);
        // 点击全选按钮，实现全部选中和全部取消
        qx.onclick = function () {
            // 点击全选按钮：btn状态等于全选状态；那就先标记下全选状态
            var flag = qx.checked;
            for (var i = 0; i < btn.length; i++) {
                btn[i].checked = flag;
            }
        }

        //点击反选按钮，实现将btn的状态逆转
        fx.onclick = function () {
            // 反选按钮和btn的处理
            for (var i = 0; i < btn.length; i++) {
                if (btn[i].checked) {
                    btn[i].checked = false;
                } else {
                    btn[i].checked = true;
                }
            }
            //反选按钮和全选按钮的处理
            // 就是看那个btn按钮的选中数，若等于btn个数则选中全选按钮；不等就不选中全选按钮
            var count = 0;
            for (var i = 0; i < btn.length; i++) {
                if (btn[i].checked) {
                    count++;
                }
            }
            if (count == btn.length) {
                qx.checked = true;
            } else {
                qx.checked = false;
            }
        }

        //点击btn按钮，如果全部选中btn按钮，则选中全选按钮
        var count = 0;
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                // 你每点击一次btn按钮你都得重新计算是否全部btn按钮都被选中了
                count = 0;
                // 开始算
                for (var j = 0; j < btn.length; j++) {
                    if (btn[j].checked) {
                        count++;
                    }
                }
                if (count == btn.length) {
                    qx.checked = true;
                } else {
                    qx.checked = false;
                }
            }
        }
    </script>
</body>

</html>