复选框勾选

最新推荐文章于 2024-10-01 18:51:18 发布

mewgulfszd！

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量72

点赞数

文章标签： servlet java 前端

本文链接：https://blog.csdn.net/CLhen/article/details/125505054

版权

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