怎么可以让每个全选选择它对应的内容，让每个全选独立，
<!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__82223回答
-
李晓健
//全选或全不选 $(".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。如果你的问题已解决，请记得采纳答案！ -
李晓健
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); } }
随时随地看视频慕课网APP
相关分类
JQuery