<!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>
3 回答
已采纳
李晓健
TA贡献1036条经验 获得超461个赞
//全选或全不选
$(".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。
如果你的问题已解决，请记得采纳答案！
李晓健
TA贡献1036条经验 获得超461个赞
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);
}
}- 3 回答
- 0 关注
- 1557 浏览
添加回答
举报
0/150
提交
取消