jQuery练习6--全选反选和全反选

最新推荐文章于 2023-02-21 14:42:05 发布

原创最新推荐文章于 2023-02-21 14:42:05 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

71 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的表格全选、全取消及全反选功能。该功能允许用户通过按钮控制表格中所有复选框的状态，并讨论了在不同浏览器版本中的兼容性问题。

 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>