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  新闻动态 /div 

  div  

  div  

  div  input type="checkbox"   id="informContentAll" span 全选 /div 

  div  img src="images/content/chakan.png" img src="images/content/xiugai.png" img src="images/content/shanchu.png" /div 

  div   id="newsPB" img src="images/content/news.png" /div 

  /div 

  div  

  div  

  div  input type="checkbox" name="newsCheck" nbsp; nbsp;Facebook叫阵苹果HomeKit 推物联网云平台 img src="images/content/hebing.png"  span  2015-2-10 /div 

  div  input type="checkbox" name="newsCheck" nbsp; nbsp;Facebook叫阵苹果HomeKit 推物联网云平台 img src="images/content/hebing.png"  span  2015-2-10 /div 

  div  input type="checkbox" name="newsCheck" nbsp; nbsp;Facebook叫阵苹果HomeKit 推物联网云平台 img src="images/content/hebing.png"  span  2015-2-10 /div 

  

  /div 

  /div 

 /div 

 div id="activityContent" 

  div  活动动态 /div 

  div  

  div  

  div  input type="checkbox"   id="activityContentAll" span 全选 /div 

  div  img src="images/content/chakan.png" img src="images/content/xiugai.png" img src="images/content/shanchu.png" /div 

  div   id="activityPB" img src="images/content/tianjia.png" /div 

  /div 

  div  

  div  

  div  input type="checkbox" name="newsCheck" nbsp; nbsp;Facebook叫阵苹果HomeKit 推物联网云平台 img src="images/content/hebing.png"  span  2015-2-10 /div 

  div  input type="checkbox" name="newsCheck" nbsp; nbsp;Facebook叫阵苹果HomeKit 推物联网云平台 img src="images/content/hebing.png"  span  2015-2-10 /div 

  div  input type="checkbox" name="newsCheck" nbsp; nbsp;Facebook叫阵苹果HomeKit 推物联网云平台 img src="images/content/hebing.png"  span  2015-2-10 /div 

  /div 

  /div 

  /div 

 /div 

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

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

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/8632.html