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

2015/04/13 47735

要实现多选框的选择相关映射，要实现以下逻辑：

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“，至于具体值怎么转换就要看每个人的项目了。

代码片段