jQuery实现checkbox的全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
 <title>jQuery实现CheckBox全选、全不选</title>  
 <script src="jquery-1.6.2.min.js" type="text/javascript"></script>    
 <script type="text/javascript">  
         $(function() {  
            $("#checkAll").click(function() {  
                 $('input[name=subBox]').attr("checked",this.checked);   
             });  
             var $subBox = $("input[name='subBox']");  
             $subBox.click(function(){  
                 $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);  
             }); 
             $("#reverse").click(function(){
                $subBox.each(function(){
                    if($(this).attr("checked")){
                        $(this).attr("checked", false); 
                    }else{
                        $(this).attr("checked", true); 
                    }
                })
             })
         });  
     </script>  
 </head>  
 <body>  
     <div>  
         <input id="checkAll" type="checkbox" />全选
         <input id="reverse" type="checkbox" />反选
         <input name="subBox" type="checkbox" />项1  
         <input name="subBox" type="checkbox" />项2  
         <input name="subBox" type="checkbox" />项3  
         <input name="subBox" type="checkbox" />项4  
     </div>  
 </body>  
 </html> 

 

posted @ 2012-06-25 14:19  绒花雪冷  阅读(193)  评论(0编辑  收藏  举报