1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <table border="1" align="center"> 9 <tr> 10 <th>状态</th> 11 <th>用户名</th> 12 </tr> 13 <tr> 14 <td><input type="checkbox"/></td> 15 <td>赵</td> 16 </tr> 17 <tr> 18 <td><input type="checkbox"/></td> 19 <td>钱</td> 20 </tr> 21 <tr> 22 <td><input type="checkbox"/></td> 23 <td>孙</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"/></td> 27 <td>李</td> 28 </tr> 29 <tr> 30 <td><input type="checkbox"/></td> 31 <td>周</td> 32 </tr> 33 <tr> 34 <td><input type="button" value="全选中"/></td> 35 <td><input type="button" value="全取消"/></td> 36 <td><input type="button" value="全反选"/></td> 37 </tr> 38 </table> 39 <script type="text/javascript"> 40 //页面加载时，将全取消按钮失效 41 window.onload = function(){ 42 $(":button:eq(1)").attr("disabled","disabled"); 43 } 44 //全选中 45 $(":button:eq(0)").click(function(){ 46 //所有复选框设置为选中状态 47 $(":checkbox").attr("checked","checked"); 48 //将该按钮失效 49 $(this).attr("disabled","disabled"); 50 //将全取消按钮生效 51 $(":button:eq(1)").removeAttr("disabled"); 52 }); 53 //全取消 54 $(":button:eq(1)").click(function(){ 55 //所有选中的复选框删除选中属性 56 $(":checkbox:checked").removeAttr("checked"); 57 //将该按钮失效 58 $(this).attr("disabled","disabled"); 59 //将全选中按钮生效 60 $(":button:eq(0)").removeAttr("disabled"); 61 }); 62 //全反选 63 $(":button:eq(2)").click(function(){ 64 65 //将选中的失效 66 $(":checkbox:checked").attr("disabled","disabled"); 67 68 //将未选中的选中 69 $(":checkbox:not(:checked)").attr("checked","checked"); 70 71 //将失效的生效，同时删除选中属性 72 $(":checkbox:disabled").removeAttr("disabled").removeAttr("checked"); 73 74 }); 75 </script> 76 </body> 77 </html>
全反选或者
1 $(":button:eq(2)").click(function(){ 2 $(":checkbox").each(function(){ 3 if($(this).attr("checked")!=null) 4 { 5 $(this).removeAttr("checked"); 6 } 7 else 8 { 9 $(this).attr("checked","checked"); 10 } 11 }); 12 13 });