分组全选或全不选

最新推荐文章于 2020-07-29 13:14:52 发布

一位不愿透露姓名的大英俊

最新推荐文章于 2020-07-29 13:14:52 发布

阅读量377

点赞数

分类专栏：每天一道小菜

本文链接：https://blog.csdn.net/wjy199506/article/details/60141120

版权

每天一道小菜专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .group{
            border: 1px solid #DDDDDD;
            margin-bottom:-1px;
        }
        .group:after{
            content: '';
            display: block;
            clear: both;
        }
        .group-lf{
            float: left;
            padding-left: 50px;
        }
        .group-rt{
            float: left;
            border-left: 1px solid #DDDDDD;
        }
        .group-rt>li{
            float: left;
            margin-right: 50px;
        }
    </style>
</head>
<body>
<div class="group">
    <div class="group-lf">
        <label for="chk1">全选/全不选</label>
        <input type="checkbox" class="all" id="chk1">
    </div>

    <ul class="group-rt list">
        <li><input type="checkbox" value="1" name="1"> 1.皮皮虾我们走</li>
        <li><input type="checkbox" value="2" name="1"> 2.皮皮虾我们回来</li>
    </ul>
</div>
<div class="group">
    <div class="group-lf">
        <label for="chk2">全选/全不选</label>
        <input type="checkbox" class="all" id="chk2">
    </div>

    <ul class="group-rt list">
        <li><input type="checkbox" value="1" name="2"> 1.皮皮虾我们走</li>
        <li><input type="checkbox" value="2" name="2"> 2.皮皮虾我们回来</li>
        <li><input type="checkbox" value="2" name="2"> 2.皮皮虾我们回来</li>
    </ul>
</div>

<script src="jquery.js"></script>
<script>
    $(function () {
        //全选或全不选
        $(".all").click(function(){
            if(this.checked){
                $(this).parent().next().children().children(':checkbox').attr("checked", true);
            }else{
                $(this).parent().next().children().children(':checkbox').attr("checked", false);
            }
        });
        $(".list :checkbox").click(function(){
            var chkname=$(this).attr('name');
            var chknum = $("input[name="+chkname+"]").length;
            var chk = 0;
            $("input[name="+chkname+"]").each(function () {
                if($(this).attr("checked")==true){
                    chk++;
                }
            });
            if(chknum==chk){//全选
                $(this).parent().parent().prev().children(':checkbox').attr("checked",true);
            }else{//不全选
                $(this).parent().parent().prev().children(':checkbox').attr("checked",false);
            }
        });
    });
</script>
</body>
</html>

一位不愿透露姓名的大英俊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分组全选或全不选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{ padding: 0; margin: 0; list-style: none; }
复制链接

扫一扫

专栏目录