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

2021-01-30 23:31:27 阅读：193 来源： 互联网

标签：checked Javascript 反选复选框选择 flag false 选框

用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的值传给全选框。

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

标签：checked,Javascript,反选,复选框,选择,flag,false,选框
来源： https://blog.csdn.net/weixin_44029226/article/details/113448147

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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