JavaScript实现全选功能

最终效果：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>全选功能</title>
 6         <script>
 7             
 8             function selectAll(choiceBtn){
 9                 
10                 //document.getElementsByTagName()
11             var arr=document.getElementsByName("choice");
12             for(var i=0;i<arr.length;i++){
13                 arr[i].checked=choiceBtn.checked;//循环遍历看是否全选
14             }
15             }
16         </script>
17         
18         
19     </head>
20     <body>
21         <table border="1" width="800px" height="800px">
22             
23             <tr>
24                 <td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>
25             </tr>
26             <tr>
27                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>
28             </tr>
29             <tr>
30                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>
31             </tr>
32             <tr>
33                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>
34             </tr>
35             <tr>
36                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>
37             </tr>
38             <tr>
39                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>
40             </tr>
41             <tr>
42                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除   编辑  设置</td>
43             </tr>
44             <tr>
45                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>
46             </tr>
47             <tr>
48                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除  编辑  设置</td>
49             </tr>
50             <tr>
51                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>
52             </tr>
53             <tr>
54                 <td><input type="checkbox" name="choice" /></td><td>perfect*</td><td>3413319614@qq.com</td><td>3413319614</td><td>女</td><td>删除 编辑  设置</td>
55             </tr>
56         </table>
57     </body>
58 </html>

全选功能.html

在代码中定义了一个onclick事件

<tr>
                <td><input type="checkbox" onclick="selectAll(this)" />全选</td><td>用户名</td><td>邮箱</td><td>电话号码</td><td>性别</td><td>操作</td>
            </tr>

注意：针对本实例来说不能使用document.getElementsByTagName()获取标签，因为获取的对象不精确。

定义的事件selectAll()

<script>
            
            function selectAll(choiceBtn){
                
                //document.getElementsByTagName()
            var arr=document.getElementsByName("choice");
            for(var i=0;i<arr.length;i++){
                arr[i].checked=choiceBtn.checked;//循环遍历看是否全选
            }
            }
        </script>