jQuery多選框的全選、全不選、反選

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

    2、當全選狀態下，子選框的其中一個撤銷點擊，全選框自動unchecked

    3、為全選狀態下，子選框一個個全部選中，最后一個子選框框點擊之后，全選框自動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">新聞動態</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 推物聯網云平臺<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 推物聯網云平臺<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 推物聯網云平臺<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">活動動態</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 推物聯網云平臺<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 推物聯網云平臺<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 推物聯網云平臺<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                 </div>
        </div>
    </div>
</div>

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

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