要实现多选框的选择相关映射,要实现以下逻辑:
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"> 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"> 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"> 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"> 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"> 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"> 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“,至于具体值怎么转换就要看每个人的项目了。