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

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

效果展示

未点击时:
用Javascript实现复选框全选/反选功能


点击顶部全选框时

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


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

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


代码解释:

这里的关键就是最上面的全选框和下面的复选框两部分。给全选框设置一个点击事件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的值传给全选框。




别喷我,写的不好就劳烦指点一二,觉得有帮助就留下个大拇指点个关注再走哈哈哈!
上一篇:【慕课网实战】Spark Streaming实时流处理项目实战笔记九之铭文升级版


下一篇:vue.js框架自学笔记(1)---小的调查问卷