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>全选</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</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</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</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>全选</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</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</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</div> 
                 </div> 
        </div> 
    </div> 
</div>

这里我要做一些解释，我在一个页面中涉及了两组多选框，而两组复选框的相关class名称我全都命名为一样，算是想做一个通用的复选样式吧。

$(“.all”)表示两组复选框的全选checkbox,而两组的子选框name都为newsCheck。变量flag information是用于区分两组多选框的变量。flag有两种值：”informContent“ 和 ”activityContent“，至于具体值怎么转换就要看每个人的项目了。