javascript实现表格全选功能

效果展示:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6     <script type="text/javascript">
 7         function selectAll(choiceBtn) {
 8             var arr = document.getElementsByName("choice")
 9             for(var i=0;i<arr.length;i++){
10                 arr[i].checked=choiceBtn.checked
11             }
12         }
13     </script>
14 </head>
15 <body>
16     <table border="1" width="800px" height="800px">
17         <tr>
18             <td>选择</td><td>用户名</td><td>邮箱</td><td>电话</td><td>性别</td><td>操作</td>
19         </tr>
20         <tr>
21             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
22         </tr>
23         <tr>
24             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
25         </tr>
26         <tr>
27             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
28         </tr>
29         <tr>
30             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
31         </tr>
32         <tr>
33             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
34         </tr>
35         <tr>
36             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
37         </tr>
38         <tr>
39             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
40         </tr>
41         <tr>
42             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
43         </tr>
44         <tr>
45             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
46         </tr>
47         <tr>
48             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
49         </tr>
50         <tr>
51             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
52         </tr>
53         <tr>
54             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
55         </tr>
56         <tr>
57             <td><input type="checkbox" name="choice"></td><td>username</td><td>123@qq.com</td><td>123456</td><td></td><td>发邮件 封号 编辑</td>
58         </tr>
59         <tr>
60             <td><input type="checkbox" onclick="selectAll(this)">全选</td>
61         </tr>
62     </table>
63 </body>
64 </html>

 

posted @ 2020-03-26 21:30  组装梦想  阅读(962)  评论(0编辑  收藏  举报