復習HTML、CSS、JS練習題
阿新 • • 發佈：2018-02-23
bsp width type nbsp alt 打勾 text image 習題 
表格復選框全選
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(View Code"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、判斷所有的復選框都是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
下面內容全部選中後，自動全選！如有一行內容沒有選中，全選則不打勾
復習HTML、CSS、JS練習題