怎么可以让每个全选选择它对应的内容，让每个全选独立，

怎么可以让每个全选选择它对应的内容，让每个全选独立，

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script type="text/javascript" src="jquery.js"></script>
   <style type="text/css">
   /*公共*/
div,p,span,a,img,ul,ol,li,body {
   margin:0;
   padding: 0;
}
ul li{
   list-style: none;
}
.added{
   position: absolute;
   left:16%;
}
.cashier{
   width:915px;
}
.cashier_ul{
   width:100%;
}
.cashier_ul li{
   width:135px;
   height:40px;
   float: left;
}
.clouds ul{
   display: flex;
}
.clouds ul li{
   float: left;
   height:40px;
   border:1px solid #ccc;
   width:10.85%;
   text-align: center;
   line-height: 40px;
   border-top:none;
   border-right:none;
   flex:1;
}
li.clo_tab{
   background-color: #63cfde;
   border:1px solid #009abd;
}
.clouds ul li.clo_tab a{
   color:#fff;
}
.clouds_tab{
   border:1px solid #ccc;
   border-top:none;
   overflow: auto;
   padding:5px;
   display: none;
}
.clo_tab_center{
   display: block;
}
   </style>
</head>
<body>
   <div class="added cl">
                    <div class="cashier">
                       <div class="clouds">

<ul>
<li class="clo_tab"><a href="#">销售</a></li>

                                <li><a href="#">商品</a></li>
                                <li><a href="#">库存</a></li>
                            </ul>
                        </div>
                        <div class="div_tab">
                            <div class="clouds_tab clo_tab_center">
                                <div class="select_all">
                                    <input type="checkbox" name="" id="all" class="all">
                                    <label for="all" id="selectAll2">全选</label>
                                </div>
                                <ul class="cashier_ul list">
                                    <li><label><input type="checkbox" value=""> 营业概况</label></li>
                                    <li><label><input type="checkbox" value=""> 营业概况</label></li>
                                    <li><label><input type="checkbox" value=""> 营业概况</label></li>
                                    <li><label><input type="checkbox" value=""> 营业概况</label></li>
                                </ul>
                            </div>
                            <div class="clouds_tab">
                                <div class="select_all">
                                    <input type="checkbox" name="" id="all" class="all">
                                    <label for="all" id="selectAll2">全选</label>
                                </div>
                                <ul class="cashier_ul list">
                                    <li><label><input type="checkbox" value=""> 允许收银</label></li>
                                    <li><label><input type="checkbox" value=""> 禁止无码收银</label></li>
                                    <li><label><input type="checkbox" value=""> 编辑商品资料</label></li>
                                    <li><label><input type="checkbox" value=""> 单品改价</label></li>
                                </ul>
                            </div>
                            <div class="clouds_tab">
                                <div class="select_all">
                                    <input type="checkbox" name="" id="all" class="all">
                                    <label for="all" id="selectAll2">全选</label>
                                </div>
                                <ul class="cashier_ul list">
                                    <li><label><input type="checkbox" value=""> 前台进货</label></li>
                                    <li><label><input type="checkbox" value=""> 前台进货</label></li>
                                    <li><label><input type="checkbox" value=""> 前台进货</label></li>
                                </ul>
                            </div>
                        </div>
                    </div>
            </div>

</body>
<script type="text/javascript">
//全选或全不选
           $(".all").click(function(){
                if(this.checked){
                    $(".list :checkbox").prop("checked", true);
                }else{
                   $(".list :checkbox").prop("checked", false);
                }
           });
           //设置全选复选框
           $(".list :checkbox").click(function(){
               allchk();
           });
           function allchk(){
               var chknum = $(".list :checkbox").size();//选项总个数
               var chk = 0;
               $(".list :checkbox").each(function () {
                    if($(this).prop("checked")==true){
                       chk++;
                   }
                });
               if(chknum==chk){//全选
                   $(".all").prop("checked",true);
               }else{//不全选
                   $(".all").prop("checked",false);
               }
           }
// tab切换
$(".clouds ul li").click(function(){
               $(this).addClass("clo_tab").siblings().removeClass("clo_tab");
               var index = $(this).index();
               $(".div_tab>div").eq(index).show().siblings().hide();
           })
</script>
</html>

qq__8222

浏览 1562回答 3

3回答

李晓健

//全选或全不选 $(".all").click(function(){ //获取当前全选所管辖的区域 var box = this.parentElement.parentElement; //获取当前全选所管辖的所有checkbox var checkboxs = $(".list :checkbox",box); if(this.checked){ checkboxs.prop("checked", true); }else{ checkboxs.prop("checked", false); } }); //设置全选复选框 $(".list :checkbox").click(function(){ //把当前checkbox传出去 allchk(this); }); function allchk(checkbox){ //获取当前checkbox所在的区域 var box = checkbox.parentElement.parentElement; //获取和当前checkbox 一组的其他checkbox var checkboxs = $(".list :checkbox",box); var chknum = checkboxs.size();//选项总个数 var chk = 0; checkboxs.each(function () { if($(this).prop("checked")==true){ chk++; } }); //获取当前checkbox所对应的全选按钮 var checkAll = $(".all",box); if(chknum==chk){//全选 checkAll.prop("checked",true); }else{//不全选 checkAll.prop("checked",false); } }在不改动你的html结构的前提下，可以像上面这样实现。希望你能看懂，另外说明一下，页面的id应该是唯一的，也就是说不可以有两个id值相同的标签在同一个页面，你的页面有好几个重复的id。如果你的问题已解决，请记得采纳答案！

1

0

李晓健

function allchk(checkbox){ //这里少写了2层 var box = checkbox.parentElement.parentElement.parentElement.parentElement; var checkboxs = $(".list :checkbox",box); var chknum = checkboxs.size(); var chk = 0; checkboxs.each(function () { if($(this).prop("checked")==true){ chk++; } }); var checkAll = $(".all",box); if(chknum==chk){ checkAll.prop("checked",true); }else{ checkAll.prop("checked",false); } }

0

0

随时随地看视频慕课网APP

相关分类

JQuery