Jquery 实现checkbox的反选,全选，全不选.

HTML 页面结构

  

<div>
  <input name="chkItem" type="checkbox" value="今日话题"/>
  今日话题
  <input name="chkItem" type="checkbox" value="视觉焦点" />
  视觉焦点
  <input name="chkItem" type="checkbox" value="财经" />
  财经
  <input name="chkItem" type="checkbox" value="汽车" />
  汽车
  <input name="chkItem" type="checkbox" value="科技" />
  科技
  <input name="chkItem" type="checkbox" value="房产" />
  房产
  <input name="chkItem" type="checkbox" value="旅游" />
  旅游 </div>
<div>
  <input id="btnCheckAll" type="button" value="全选" />
  <input id="btnCheckNone" type="button" value="全不选" />
  <input id="btnCheckReverse" type="button" value="反选" />
  <input id="btnSubmit" type="button" value="提交" />
</div>
<div id="msg"></div>

JS

<script type="text/javascript">
   $(function(){
	   
	   //全选
	  $("#btnCheckAll").click(function(){
		  // checked="checked" 
		  //匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
		//方法1：
        //  $("input:checkbox").attr("checked","checked");
		
		//方法2：
		$("input:checkbox").attr("checked",true);
	}); 
	
	  
	  //全不选
	  $("#btnCheckNone").click(function(){

         //方法1：
         // $("input:checkbox").removeAttr("checked");
		 
		 //方法2：
		   $("input:checkbox").attr("checked",false);
	 }); 
	 
	 
	 //反选
	  $("#btnCheckReverse").click(function(){
		  // checked="checked" 
		  //遍历
		  $("input:checkbox").each(function(){
			  
			  //方法1：
			    this.checked=!this.checked;
				
				
		      //方法2：
			  //判断
			  // is(expr|obj|ele|fn)
			 /* if($(this).is(":checked")){
				  $(this).attr("checked",false);
			  }else{
				  $(this).attr("checked",true);  
			  }*/
			  
		  });
	 });
	 
	  
	  //提交选中的值
	   $("#btnSubmit").click(function(){
		   var str="";
		   //遍历数据
	       $("input:checkbox").each(function(){
			   //判断是否被选中
			   if($(this).is(":checked")){
				   str+=$(this).val()+" ";   
			   }
			   
		   });
		   //添加到层上显示数据
		  $("#msg").html(str);
	 });
	   
  });
</script>

效果：

  1)运行时

2）选择{全选}

3）选择{全不选}

4）选择其中2个选项

5）选择{反选}

6）选择{提交}