全选和反选练习_if( inp && inp[0] ) inp[0].checked = false;-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44278908/article/details/117389649

这个示例展示了如何使用JavaScript实现HTML表格中全选和反选的功能。通过监听全选按钮的点击事件，可以同步更新所有行的复选框状态。同时，当单击任意行的复选框时，会检查所有复选框是否都被选中，据此更新全选按钮的状态。这有助于提高用户在数据管理界面的操作效率。

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

全选和反选

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .my-table {
            width: 300px;
            margin: 100px auto 0;
        }

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

        }

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

        th {
            background-color: #0099cc;
            font: bold 16px "微软雅黑";
            color: #ffffff;
        }

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

        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script>
        window.onload = function () {
            // 需求1：点击上面的input，下面全选或者反选。
            // 思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。
            var topInp = document.getElementById("title");

            var tbody = document.getElementById("content");
            var botInpArr = tbody.getElementsByTagName("input");

            // 绑定事件
            topInp.onclick = function () {
                // 被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值
                for (var i = 0; i < botInpArr.length; i++) {
                    botInpArr[i].checked = this.checked;
                }
            }

            // 需求2：点击下面的input，如果下面的全部选定了，上面的全选，否则相反。
            // 思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
            // checked属性值是否全部都是true，如果有一个是false，那么上面的input的checked属性也是false；都是true，topInp的checked就是true；

            for (var i = 0; i < botInpArr.length; i++) {
                botInpArr[i].onclick = function () {
                    // 每一个input都要绑定事件
                    // 开闭原则（用开关来控制）
                    var bool = true;
                    // 检测每一个input的checked属性值.
                    for (var j = 0; j < botInpArr.length; j++) {
                        if (botInpArr[j].checked === false) {
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }
    </script>
</head>

<body>
    <div class="my-table">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="title" />

                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>
            <tbody id="content">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>菜品1</td>
                    <td>木屋烧烤</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>菜品2</td>
                    <td>蒸菜馆</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>菜品3</td>
                    <td>海底捞火锅</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>菜品4</td>
                    <td>面点王</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

在这里插入图片描述