利用jquery一键控制复选框的全选/全不选

最新推荐文章于 2021-05-16 18:32:04 发布

六月星海

最新推荐文章于 2021-05-16 18:32:04 发布

阅读量728

点赞数

分类专栏：小案例

本文链接：https://blog.csdn.net/qq_38039015/article/details/79599865

版权

小案例专栏收录该内容

0 篇文章 0 订阅

订阅专栏

设置一个总的复选框控制子复选框的全选与全不选，在子复选框全选后，只要取消其中一个的勾选，总的复选框不能勾选。

代码部分（样式省略）

<body>
<table>
    <tr>
        <td>全选控制按钮：<input type="checkbox" id="chooseAll"/></td>
    </tr>
    <tr>
        <td>子按钮1：<input type="checkbox" class="children" /></td>
    </tr>
    <tr>
        <td>子按钮2：<input type="checkbox" class="children" /></td>
    </tr>
    <tr>
        <td>子按钮3：<input type="checkbox" class="children" /></td>
    </tr>
    <tr>
        <td>子按钮4：<input type="checkbox" class="children" /></td>
    </tr>
</table>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
    $("#chooseAll").click(function(){
        var flag=$(this).prop("checked");

        //控制其他子按钮的选择与不选择
        $(".children").prop("checked",flag);
    });

    //子按钮控制控制按钮的勾选与否
    $(".children").click(function(){
        //获得一组子按钮标签
        var children=$(".children");

        for(var i=0; i<children.length;i++){
            //子按钮其中有个不选的时候，控制按钮不能勾选
            if(children.eq(i).prop("checked")==false){
                $("#chooseAll").prop("checked",false);
                return;
            }
        }
        $("#chooseAll").prop("checked",true);
    });

});
</script>
</body>