案例：表单全选和取消全选
全选和取消全选
全选之后下面的被全部选中
下面的全部选中 上面才被选中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <div class="wrap"></div> 10 <table> 11 <thead> 12 <tr> 13 <th> 14 <input type="checkbox" id = "j_cbAll"> 15 </th> 16 <th>商品</th> 17 <th>价钱</th> 18 </tr> 19 </thead> 20 <tbody id = "j_tb"> 21 <tr> 22 <td> 23 <input type="checkbox"> 24 </td> 25 <td>iphone8</td> 26 <td>8000</td> 27 </tr> 28 29 <tr> 30 <td> 31 <input type="checkbox"> 32 </td> 33 <td>iphone4</td> 34 <td>8000</td> 35 </tr> 36 37 <tr> 38 <td> 39 <input type="checkbox"> 40 </td> 41 <td>iphone4</td> 42 <td>8000</td> 43 </tr> 44 45 </tbody> 46 </table> 47 </body> 48 <script> 49 //1. 全选和取消全选的作用 让下面所有复选框checked属性 （选中状态） 跟随 全选按钮即可 50 //获取元素 51 var j_cbAll = document.getElementById('j_cbAll'); //全选按钮 52 var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');//下面所有的复选框 53 //注册事件 54 j_cbAll.onclick = function() { 55 //this.checked 它可以得到当前复选框选中状态 如果是true 就是选中 如果是false就是未选中 56 //this.checked = 'checked'; 57 console.log(this.checked); 58 for(var i = 0 ;i<j_tbs.length ; i++){ 59 j_tbs[i].checked = this.checked; 60 } 61 } 62 63 64 // 2.下面复选框全部选中 上面才选中，如果一个没选择中 上面全选就不选中 65 66 for(var i=0 ; i<j_tbs.length ; i++) 67 { 68 j_tbs[i].onclick = function(){ 69 var flag = true; 70 for(var i = 0 ; i < j_tbs.length ; i++) 71 { 72 if(!j_tbs[i].checked) 73 { 74 flag = false; 75 break;//退出for循环 这样可以提高执行效率 只要有一个没有选中剩下的就无需循环 76 } 77 } 78 j_cbAll.checked = flag; 79 } 80 } 81 </script> 82 </html>
