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.9.1.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 //全取消失效 42 $(":button:eq(1)").attr("disabled","disabled"); 43 44 //1、全选中 45 var $button1 = $("input[value='全选中']").first(); 46 $button1.click(function(){ 47 48 $("input:checkbox").attr("checked","checked"); 49 //全选中按钮失效 50 $(this).attr("disabled","disabled"); 51 //全取消生效 52 $button2.removeAttr("disabled"); 53 }); 54 55 //2、全取消 56 var $button2 = $("input[value='全取消']"); 57 $button2.click(function(){ 58 //alert("全取消"); 59 $("input:checkbox").removeAttr("checked"); 60 61 //全选中按钮生效 62 $button1.removeAttr("disabled"); 63 //全取消失效 64 $(this).attr("disabled","disabled"); 65 }); 66 67 //3、全反选 68 var $button3 = $("input:button").last(); 69 $button3.click(function(){ 70 //alert("全反选"); 71 $(":checkbox:checked").attr("disabled","disabled"); 72 $(":checkbox:not(:checked)").attr("checked","checked"); 73 $(":checkbox:disabled").removeAttr("disabled").removeAttr("checked"); 74 }); 75 </script> 76 </body> 77 </html>
注意：在ie6下可以正常运行。但到了ie10，firefox高版本后，只能选一次，后面就不能选了。