JS实现全选框

最新推荐文章于 2024-04-02 19:39:43 发布

橙臣程

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量392

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_64560999/article/details/126242921

版权

先创建选项框

<body>
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="se_all">
                </th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iphone</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>vivo</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>apple</td>
                <td>9000</td>
            </tr>
        </tbody>
    </table>
</body>

得到->
在这里插入图片描述

<script>
    var all = document.getElementById('se_all');
    var sons = document.getElementById('tb').querySelectorAll('input');
    //实现全选框对子选框的作用
    all.onclick = function () {
        //this.checked代表的是当前的选中状态
        for (var i = 0; i < sons.length; ++i) {
            sons[i].checked = this.checked;
        }
    }

    //实现子选框对全选框的作用
    for (var i = 0; i < sons.length; ++i) {
        sons[i].onclick = function () {
            var flag = 0;
            for (var i = 0; i < sons.length; ++i) {
                if (!sons[i].checked) break;
                else flag++;
            }
            if (flag == 3) all.checked = true;//遍历判断儿子们是否都被选上了
            else all.checked = false;
        }
    }


</script>