表格复选框全选
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>效果图：
点击全选，下面所有内容则全部选中
表格复选框全选扩展(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、判断所有的复选框都是true56 ????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>下面内容全部选中后，自动全选！如有一行内容没有选中，全选则不打勾
复习HTML、CSS、JS练习题
原文地址：https://www.cnblogs.com/1301694f/p/8463472.html