复选框勾选

mewgulfszd！

于 2022-06-28 16:30:47 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： servlet java 前端

本文链接：https://blog.youkuaiyun.com/CLhen/article/details/125505054

这篇博客内容涉及HTML表格和JavaScript交互，主要讲解了如何通过JavaScript实现全选和单个选择的功能，使得表格中所有复选框的状态可以同步。通过监听全选复选框和表格内复选框的点击事件，实现了当全选按钮被点击时，所有行的复选框被选中或取消；当表格内任一复选框被点击时，全选按钮会根据所有复选框的状态自动切换选中状态。

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

<body>
    <table>
        <thead>
            <tr>
                <td><input type="checkbox" id="aipt"></td>
                <td>名称</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody id="ipts">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>苹果</td>
                <td>20</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>苹果</td>
                <td>20</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>苹果</td>
                <td>20</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>苹果</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
    <script>
        var aipt = document.getElementById('aipt');
        var ipts = document.getElementById('ipts').getElementsByTagName('input');
        console.log(aipt);
        console.log(ipts);
        aipt.onclick = function () {
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = this.checked;
            }
        }
        for (var i = 0; i < ipts.length; i++) {
            ipts[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < ipts.length; i++) {
                    if (!ipts[i].checked) {
                        flag = false;
                        break;
                    }
                }
                aipt.checked = flag;
            }
        }
    </script>
</body>