复习HTML、CSS、JS练习题

表格复选框全选

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7     window.onload = function(){
 8         var inputAll = document.getElementById("all");
 9         inputAll.addEventListener("click",checks);
10     }
11     function checks(){
12         var obj = this;
13         var objs = document.getElementsByClassName("all");
14         for(var i = 0; i<objs.length;i++){
15             objs[i].checked = obj.checked;
16         }
17     }
18 </script>
19 </head>
20 
21 <body>
22 <table border="1" width="100%">
23     <tr>
24         <th width="10%">
25             <label>
26                 <input type="checkbox" id="all" >
27                 全选
28             </label>
29         </th>
30         <th>姓名</th>
31         <th>性别</th>
32         <th>年龄</th>
33     </tr>
34     <tr>
35         <td width="10%" >
36             <input type="checkbox" class="all" onClick="qx()">
37         </td>
38         <td>张三</td>
39         <td>男</td>
40         <td>23</td>
41     </tr>
42     <tr>
43         <td width="10%">
44             <input type="checkbox" class="all" onClick="qx()">
45         </td>
46         <td>李四</td>
47         <td>男</td>
48         <td>25</td>
49     </tr>
50     <tr>
51         <td width="10%">
52             <input type="checkbox" class="all" onClick="qx()">
53         </td>
54         <td>王五</td>
55         <td>女</td>
56         <td>23</td>
57     </tr>
58 </table>
59 </body>
60 </html>

View Code

效果图：

点击全选，下面所有内容则全部选中

表格复选框全选扩展(10分)

点击下面的复选框只有全部都选中的情况向全选复选框为选中状态

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 
 7 </head>
 8 
 9 <body>
10 <table border="1" width="100%">
11     <tr>
12         <th width="10%">
13             <label>
14                 <input type="checkbox" id="all" >
15                 全选
16             </label>
17         </th>
18         <th>姓名</th>
19         <th>性别</th>
20         <th>年龄</th>
21     </tr>
22     <tr>
23         <td width="10%" >
24             <input type="checkbox" class="all" onClick="qx()">
25         </td>
26         <td>张三</td>
27         <td>男</td>
28         <td>23</td>
29     </tr>
30     <tr>
31         <td width="10%">
32             <input type="checkbox" class="all" onClick="qx()">
33         </td>
34         <td>李四</td>
35         <td>男</td>
36         <td>25</td>
37     </tr>
38     <tr>
39         <td width="10%">
40             <input type="checkbox" class="all" onClick="qx()">
41         </td>
42         <td>王五</td>
43         <td>女</td>
44         <td>23</td>
45     </tr>
46 </table>
47 </body>
48 </html>
49 <script type="text/javascript">
50 function  qx(){
51         //1、获取所有的复选框
52     var flag=true;
53     var quan=document.getElementById("all");
54     var al=document.getElementsByClassName("all");
55 //2、判断所有的复选框都是true
56     for(var i in al){
57         if(al[i].checked==false){
58             flag=false;                
59         }
60     }
61         if(flag){
62             quan.checked=true;
63         }else{
64             quan.checked=false;
65         }
66     }
67 </script>

View Code

下面内容全部选中后，自动全选！如有一行内容没有选中，全选则不打勾