<!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="#">庫(kù)存</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=""> 營(yíng)業(yè)概況</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 營(yíng)業(yè)概況</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 營(yíng)業(yè)概況</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 營(yíng)業(yè)概況</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=""> 禁止無(wú)碼收銀</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 編輯商品資料</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 單品改價(jià)</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=""> 前臺(tái)進(jìn)貨</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 前臺(tái)進(jìn)貨</label></li>??????????????????????????????????? <li><label><input type="checkbox" value=""> 前臺(tái)進(jìn)貨</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);?? ??? ??? ???? }? ??? ??? ??? ?});?? ??? ??? ?//設(shè)置全選復(fù)選框?? ??? ??? ?$(".list :checkbox").click(function(){?? ??? ??? ??? ?allchk();?? ??? ??? ?});?? ??? ??? ?function allchk(){?? ??? ??? ??? ?var chknum = $(".list :checkbox").size();//選項(xiàng)總個(gè)數(shù)?? ??? ??? ??? ?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貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊
//全選或全不選
$(".all").click(function(){
????//獲取當(dāng)前全選所管轄的區(qū)域
????var?box?=?this.parentElement.parentElement;
????//獲取當(dāng)前全選所管轄的所有checkbox
????var?checkboxs?=?$(".list?:checkbox",box);
????if(this.checked){
????????checkboxs.prop("checked",?true);
????}else{
????????checkboxs.prop("checked",?false);
????}
});
//設(shè)置全選復(fù)選框
$(".list?:checkbox").click(function(){
????//把當(dāng)前checkbox傳出去
????allchk(this);
});
function?allchk(checkbox){
????//獲取當(dāng)前checkbox所在的區(qū)域
????var?box?=?checkbox.parentElement.parentElement;
????//獲取和當(dāng)前checkbox?一組的其他checkbox
????var?checkboxs?=?$(".list?:checkbox",box);
????var?chknum?=?checkboxs.size();//選項(xiàng)總個(gè)數(shù)
????var?chk?=?0;
????checkboxs.each(function?()?{
????????if($(this).prop("checked")==true){
????????????chk++;
????????}
????});
????//獲取當(dāng)前checkbox所對(duì)應(yīng)的全選按鈕
????var?checkAll?=?$(".all",box);
????if(chknum==chk){//全選
????????checkAll.prop("checked",true);
????}else{//不全選
????????checkAll.prop("checked",false);
????}
}在不改動(dòng)你的html結(jié)構(gòu)的前提下，可以像上面這樣實(shí)現(xiàn)。希望你能看懂，另外說(shuō)明一下，頁(yè)面的id應(yīng)該是唯一的，也就是說(shuō)不可以有兩個(gè)id值相同的標(biāo)簽在同一個(gè)頁(yè)面，你的頁(yè)面有好幾個(gè)重復(fù)的id。
如果你的問(wèn)題已解決，請(qǐng)記得采納答案！
李曉健
TA貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊
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);
????}
}-
qq__8222好的，謝謝
- 3 回答
- 0 關(guān)注
- 1609 瀏覽
添加回答
舉報(bào)
0/150
提交
取消