jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

本文章总结jQuery实现checkbox三种情况的全选功能

第一种：等值全选，也称name的等值全选，通过checkbox的名称name实现。

第二种：模糊全选，也称id模糊全选，通过checkbox的id或value值实现。

第三种：值范围全选，也称value值范围全选，通过checkbox的value值实现，或者截取id数字后缀范围判断实现。

• 等值全选

在工作中经常会用到checkbox的全选功能，平时大家用得最多的全选和反选是第一种，一般都是基于全部名称相同的checkbox进行实现，这种全选比较简单。实现代码如下：

$("input#allSer").click(function(){
    if(this.checked){    
	$("input[type=checkbox][name=newselectedServers]").attr("checked",true);   
    }else{    
	$("input[type=checkbox][name=newselectedServers]").attr("checked",false); 
   }
});

以上代码实现的功能：当单击id="allSer”的按钮时，所有名name=“newselectedServers"的checkbox就被全选上，再次单击时则取消全选，功能比较简单，就不再详述。

• 模糊全选

模糊全选可已实现特定的需求，如前缀或后缀包含特定字符，首先应了解jQuery模糊匹配的规则：

      [属性名称]         匹配包含给定属性的元素
      [att=value]       匹配包含给定属性的元素
      [att*=value]     模糊匹配
      [att!=value]      不能是这个值
      [att$=value]     结尾是这个值
      [att^=value]     开头是这个值
      [att1][att2][att3]...   匹配多个属性条件中的一个

实现例子如下：

$("input[type=checkbox][name=newselectedServers][id^=new]").attr("checked",true);//全选所有id前缀为new的checkbox
$("input[type=checkbox][name=newselectedServers][id$=servers]").attr("checked",true);//全选所有id后缀为servers的checkbox
$("input[type=checkbox][name=newselectedServers][value^=20]").attr("checked",true);//全选所有value前缀为20的checkbox

反选类同代码就不贴出来。

还有一种多值模糊全选，实现代码如下：

$("input[type=checkbox][name=newselectedServers][value^=20],[value^=21],[value^=50],[value^=51],[value^=70],[value^=71]").attr("checked",true);

以上代码实现所有以20,21,50,51,70,71开头的checkbox的全选。

• 值范围全选

让我头痛的是第三种值访问全选，前两种都实现不了我想要的功能。

功能要求：实现服务器列表部分全选，服务器列表的value含有的值是数字，特定功能的服务器的值在某一指定的范围，勾选特定功能的全选时就要把指定范围的服务器列表全部选上。

以后需求看起来简单，实现起来也简单，难就难找资料的过程和在想的过程，在网上找了很多关系jQuery实现checkbox全选资料和微博，都没有一篇符合我的要求，最后只能通过自己各种想法，各种调试，最终还是实现的自己想要的功能。想法的关键点在于平时用的全选大部分都是基于checkbox的name和id，很少人使用value实现全选，想到这就成功了一半，再通过遍历比较值的大小就可以实现值范围的全选，大家都迫不及待想知道实现的代码了吧。

		//实现九游服务器的全反选，九游服务器的value范围在2000-5000之间
		$("input#sjspecialSer").click(function(){
			 if(this.checked){    
				//遍历value，转换成数字对比
				 $("input[type=checkbox][name=newselectedServers]").each(function(index,element){
					 var serverId = Number(element.value);
					 if(serverId >= 2000 && serverId < 5000){
						 $(element).attr("checked",true);
					 }
				 });
			 }else{    
				 $("input[type=checkbox][name=newselectedServers]").each(function(index,element){
					 var serverId = Number(element.value);
					 if(serverId >= 2000 && serverId < 5000){
						 $(element).attr("checked",false);
					 }
				 });
			 }
		});
		//实现乐玩服务器的全反选，乐玩服务器的value在5000-1000之间
		$("input#lwspecialSer").click(function(){
			 if(this.checked){  
				//遍历value，转换成数字对比
				 $("input[type=checkbox][name=newselectedServers]").each(function(index,element){
					 var serverId = Number(element.value);
					 if(serverId >= 5000 && serverId < 10000){
						 $(element).attr("checked",true);
					 }
				 });
			 }else{    
				 $("input[type=checkbox][name=newselectedServers]").each(function(index,element){
					 var serverId = Number(element.value);
					 if(serverId >= 5000 && serverId < 10000){
						 $(element).attr("checked",false);
					 }
				 });
			 }
		});

到这里已经豁然开朗，大功告成，jQuery通过name、id和value实现对各种情况的checkbox全选，看了这篇博客还有什么checkbox的全选难得到你吗?干货不要自己知道好了，要乐于分享，转载请标明出处，谢谢！