复选框的使用

前几天在网上看到好多有关复选框的文章，看了好几篇发觉都是转载的几乎全部都是出自一篇文章，转载也就算了，运行了一下代码还是错的。自己都不去验证下就拿出来转载，真的是害人不浅啊，因此我想给大家写篇质量比较高的文章。省得大家被那些烂文章误导。

1.常见的复选框操作

（1）全选 （2）全不选 （3）反选 （4）复选框取值

2.开发的准备

（1） 代码编辑器 （2）jquery开发库

3.页面设计，这里就简单的弄两组复选框好了，代码如下

 爱好:
   唱歌
   跳舞
   跑步
   
   
   
   


   城市:
   上海
   嘉兴
   杭州
   

4.全选和全不选，这样的操作只需要设置复选框的属性checked为true或false就OK了

 $("#yes").click(function(){
		  $('[name=interest]:checkbox').attr('checked',true);
	  });
	  $("#no").click(function(){
		  $('[name=interest]:checkbox').attr('checked',false);
	  });

5.反选操作，就是说没选中的变为选中，选中的则取消选中

 $("#reverse").click(function(){
		  $('[name=interest]:checkbox').each(
				 function(){
					// $(this).attr("checked",!$(this).attr("checked"));
					 this.checked=!this.checked;
				 }
		  );
	  });

6.取值操作，这里先判断如果用户没有选中任何的选项则给出提示

怎样判断用户有没有选中复选框呢，个人觉得只要判断被选中的个数就好了，如果被选中的个数为0则表示没有选择任何的复选框。取值的话就用each循环取出来就OK了。

 $("#submit").click(function(){
		  if($('[name=city]:checkbox:checked').length==0){
			  alert("至少要选择一个城市");
			  return false;
		  }else{
			 $('[name=city]:checkbox:checked').each(function(){
				 alert($(this).val());
			 });
			 
		  }
 });

到这里复选框的操作就差不多没了，代码我就不上传到资源里了。我把代码全部贴出来给大家吧

   爱好:
   唱歌
   跳舞
   跑步
   
   
   
   


   城市:
   上海
   嘉兴
   杭州
   

下面是运行效果图，我用好多个浏览器测试过了。代码没有任何的问题。如果有写错的地方欢迎大家拍砖。