1、全選框被點擊時，所以子選框被選中。

    2、當(dāng)全選狀態(tài)下，子選框的其中一個撤銷點擊，全選框自動unchecked

    3、為全選狀態(tài)下，子選框一個個全部選中，最后一個子選框框點擊之后，全選框自動checked

var information=$("#"+flag).find(".information");
 var $newsCheck = information.find("input[name='newsCheck']");
//多選框全選與全不選
$(".all").click(function(){

        if(this.checked){
            $(this).parents().parents().siblings(".lists").find("input[name='newsCheck']").each(function(){this.checked=true;});
        }else{
            $(this).parents().parents().siblings(".lists").find("input[name='newsCheck']").each(function(){this.checked=false;});
        }
    }
);
//子選框反選
$("input[name='newsCheck']").click(function() {
    var temp=document.getElementsByClassName("all");
    for(var i=0;i<temp.length;i++){
       if(temp[i].id == flag+"All"){
           temp[i].checked=($newsCheck.length ==information.find("input[name='newsCheck']:checked").length ? true : false);
       }
    }
});

<div id="informContent">
    <div class="informTitle title-blue">新聞動態(tài)</div>
    <div class="information">
        <div class="informMenu">
            <div class="allcheck"><input type="checkbox"  class="all" id="informContentAll"><span>全選</span></div>
            <div class="threeButton"><img src="images/content/chakan.png"><img src="images/content/xiugai.png"><img src="images/content/shanchu.png"></div>
            <div class="addButton" id="newsPB"><img src="images/content/news.png"></div>
        </div>

        <div class="lists">
         <div class="informList">
                <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫陣蘋果HomeKit 推物聯(lián)網(wǎng)云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫陣蘋果HomeKit 推物聯(lián)網(wǎng)云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
        <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫陣蘋果HomeKit 推物聯(lián)網(wǎng)云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
            
        </div>
    </div>
</div>
<div id="activityContent">
    <div class="informTitle title-red">活動動態(tài)</div>
    <div class="information">
        <div class="informMenu">
            <div class="allcheck"><input type="checkbox"  class="all" id="activityContentAll"><span>全選</span></div>
            <div class="threeButton"><img src="images/content/chakan.png"><img src="images/content/xiugai.png"><img src="images/content/shanchu.png"></div>
            <div class="addButton"  id="activityPB"><img src="images/content/tianjia.png"></div>
        </div>

        <div class="lists">
            <div class="informList">
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫陣蘋果HomeKit 推物聯(lián)網(wǎng)云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫陣蘋果HomeKit 推物聯(lián)網(wǎng)云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫陣蘋果HomeKit 推物聯(lián)網(wǎng)云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                 </div>
        </div>
    </div>
</div>

這里我要做一些解釋，我在一個頁面中涉及了兩組多選框，而兩組復(fù)選框的相關(guān)class名稱我全都命名為一樣，算是想做一個通用的復(fù)選樣式吧。

$(".all")表示兩組復(fù)選框的全選checkbox,而兩組的子選框name都為newsCheck。變量flag information是用于區(qū)分兩組多選框的變量。flag有兩種值：”informContent“ 和 ”activityContent“，至于具體值怎么轉(zhuǎn)換就要看每個人的項目了。

標(biāo)簽：

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。