全选，反选，对话框

最新推荐文章于 2025-04-23 00:15:00 发布

转载最新推荐文章于 2025-04-23 00:15:00 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuyongcong/p/5659008.html

本文介绍了一个简单的网页应用实例，通过HTML与JavaScript实现了表格中复选框的全选、取消及反选功能。该示例适用于前端开发者学习表格操作及事件处理的基本方法。

全选，反选列子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div>
            <input type="button" value = "全选" ondblclick="CheckAll()">
            <input type="button" value="取消" ondbclick="CancleAll()">
            <input type="button" value="反选" ondblclick="ReverseAll()">
     </div>
     <table>
             <theard>
                       <tr>
                              <th>序号</th>
                              <th>用户名</th>
                              <th>年龄</th>
                       </tr>
             
             </theard>
             <tbody id="tb">
                       <tr>

                           <td><input class="c1" type="checkbox"></td>
                            <td>Wyc</td>
                            <td>17</td>
                       </tr>
                       <tr>

                           <td><input class="c1" type="checkbox"></td>
                            <td>Wyc</td>
                            <td>18</td>
                       </tr>
                       <tr>

                           <td><input class="c1" type="checkbox"></td>
                            <td>Wyc</td>
                            <td>19</td>
                       </tr>
                   
             </tbody>
     </table>
     <script>

           function CeckAll(){
                   var tb = document.getElementById("td");
                   var checks = tb.getElementsByClassName("c1");
                   for(var i=0;i<checks.length;i++){
                            var current_check = checks[i];
                            current_check.checked =true;
                  }
           }
           function CancleAll(){
                    var tb = document.getElementById("tb");
                    var checks = tb.getElementsByClassName("c1");
                     for(var i=0;i<checks.length;i++){
                           var current_check = checks[i];
                           current_check.checked = false;
                     }
            }
            function ReverseAll(){
                    var tb = document.getElementById("tb");
                    var checks = tb.getElementsByClassName("c1");
                    for(var i=0;i<checks.length;i++){
                          var current_check = checks[i];
                          if(current_check.checked){
                              current_check.check = false;
                          }else{
                                     current_check.checked = true;
                          }
                    }
           }

     </script>
</body>
</html>

列子

转载于:https://www.cnblogs.com/wuyongcong/p/5659008.html