zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    UVA 11019 Matrix Matcher ( 二维字符串匹配, AC自动机 || 二维Hash )
    蓝桥杯 修改数组 (巧用并查集)
    luoguP3242 [HNOI2015]接水果
    CF757F Team Rocket Rises Again
    luoguP2597 [ZJOI2012]灾难
    luoguP4103 [HEOI2014]大工程
    luoguP3233 [HNOI2014]世界树
    luoguP2495 [SDOI2011]消耗战
    CF613D Kingdom and its Cities
    51nod 1584 加权约数和
  • 原文地址:https://www.cnblogs.com/zzmx0/p/12577507.html
Copyright © 2011-2022 走看看