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>