用Javascript实现复选框全选/反选功能

2022-11-14 21:26:56

用Javascript实现复选框全选/反选功能

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

在我们实际的项目之中，经常会遇见一些选择框，这些选择框有个全选的选择框，点击过后便会选择后面所有的选择框，当再一次点击全选框时，所有选择的复选框又都会变成未选择的状态。不点击全选框，当点击完其他的选择框时，全选框也会自动被选择。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

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

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

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

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

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
</div>
<script>
    var j_cball=document.getElementById('j_cbAll')//全选按钮
    var j_tbs=document.getElementById('j_tb').getElementsByTagName('input')//下面所有的复选框
    j_cball.onclick=function () {
        console.log(this.checked)//true/false
        for (var i=0;i<j_tbs.length;i++){
            j_tbs[i].checked=this.checked
        }
    }
    for (var i=0;i<j_tbs.length;i++){
        j_tbs[i].onclick=function () {
            var flag=true
            for (var i=0;i<j_tbs.length;i++){
                if (!j_tbs[i].checked){
                    flag=false
                    break
                }
            }
            j_cball.checked=flag
        }
    }
</script>
</body>
</html>

效果展示

未点击时：

点击顶部全选框时

当有一个子级复选框未选中时，全选框便不会被勾选

代码解释：

这里的关键就是最上面的全选框和下面的复选框两部分。给全选框设置一个点击事件onclick，当它checked时，返回的是ture，然后这时，我们就可以进行遍历，将下面的N个子级复选框的checked值都逐一遍历设置成true，当然，全选框未选中时为false，下面的选择框也会遍历为false。这是操作全选框时的思路。

接下来就是子选框的思路：我们需要把子选框全部勾选才能让全选框被勾选，那么也需要进行遍历检查每个子选框的checked值。我对自选框进行编号，当触发点击事件时，定义flag初值为true。然后便开始进行遍历检查，从第0个选择框开始检查，这里的！j_tbs【i】.checked的意思的第i个选择框checked的值为false，如果成立，那么将flag的值改为false，然后break退出检查的这个循环，因为已经有一个的checked值为false，所有不管后面的值是什么，都不会改变flag的值，所有再进行检查就是无意义的，所有直接break退出循环。意思是检查到第i个框发现它没有被选择，那么全选框也不应该被选择，所以flag的值被改为false，又将这个flag的值传给全选框。

别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！

码农公寓