全选全取消按钮
这个案例是当选择全选按钮，下面的每个都会被选上，当下面的每个按钮都选上，全选按钮也会被选上。
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 13 } 14 table { 15 width: 300px; 16 border-collapse: collapse; 17 margin: 100px auto; 18 border: 1px solid #999; 19 text-align: center; 20 21 } 22 table tbody td { 23 height:30px; 24 border: 1px solid #d7d7d7; 25 background-color: rgb(163, 163, 163); 26 } 27 thead th { 28 height:30px; 29 border: 1px solid #d7d7d7; 30 background-color: skyblue; 31 } 32 </style> 33 </head> 34 <body> 35 <div class='123'></div> 36 <table> 37 <thead> 38 <tr> 39 <th><input type='checkbox' id='j_cball' check='checked'/></th> 40 <th>商品</th> 41 <th>价钱</th> 42 </tr> 43 </thead> 44 <tbody id='jb'> 45 <tr> 46 <td> 47 <input type='checkbox' /> 48 49 </td> 50 <td>小米</td> 51 <td>3000</td> 52 </tr> 53 <tr> 54 <td> 55 <input type='checkbox' /> 56 57 </td> 58 <td>小米</td> 59 <td>3000</td> 60 </tr> 61 <tr> 62 <td> 63 <input type='checkbox' /> 64 65 </td> 66 <td>小米</td> 67 <td>3000</td> 68 </tr> 69 </tbody> 70 </table> 71 </div> 72 <script> 73 var jc = document.getElementById('j_cball'); 74 var jt = document.getElementById('jb').getElementsByTagName('input'); 75 jc.onclick = function() { 76 console.log(this.checked); 77 for(var i = 0; i < jt.length; i++){ 78 jt[i].checked = this.checked; 79 } 80 81 } 82 for(var i = 0; i < jt.length; i++){ 83 jt[i].onclick = function() { 84 var flag = true; 85 for(var i = 0; i < jt.length; i++){ 86 if(!jt[i].checked) { 87 flag = false; 88 break; 89 } 90 } 91 j_cball.checked = flag; 92 } 93 } 94 95 </script> 96 97 </body> 98 </html>
