1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8" /> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 12 .wrap { 13 300px; 14 margin: 100px auto 0; 15 } 16 17 table { 18 border-collapse: collapse; 19 border-spacing: 0; 20 border: 1px solid #c0c0c0; 21 300px; 22 } 23 24 th, 25 td { 26 border: 1px solid #d0d0d0; 27 color: #404060; 28 padding: 10px; 29 } 30 31 th { 32 background-color: #09c; 33 font: bold 16px '微软雅黑'; 34 color: #fff; 35 } 36 37 td { 38 font: 14px '微软雅黑'; 39 } 40 41 tbody tr { 42 background-color: #f0f0f0; 43 } 44 45 tbody tr:hover { 46 cursor: pointer; 47 background-color: #fafafa; 48 } 49 </style> 50 </head> 51 52 <body> 53 <div class="wrap"> 54 <table> 55 <thead> 56 <tr> 57 <th> 58 <input type="checkbox" id="th" /> 59 </th> 60 <th>商品</th> 61 <th>价钱</th> 62 </tr> 63 </thead> 64 <tbody id="tb"> 65 <tr> 66 <td> 67 <input type="checkbox" /> 68 </td> 69 <td>iPhone8</td> 70 <td>8000</td> 71 </tr> 72 <tr> 73 <td> 74 <input type="checkbox" /> 75 </td> 76 <td>iPad Pro</td> 77 <td>5000</td> 78 </tr> 79 <tr> 80 <td> 81 <input type="checkbox" /> 82 </td> 83 <td>iPad Air</td> 84 <td>2000</td> 85 </tr> 86 <tr> 87 <td> 88 <input type="checkbox" /> 89 </td> 90 <td>Apple Watch</td> 91 <td>2000</td> 92 </tr> 93 </tbody> 94 </table> 95 </div> 96 <script> 97 var th = document.querySelector('#th') 98 var tb = document.querySelector('#tb').querySelectorAll('input') 99 th.onclick = function () { 100 //循环给每个tr里面的input的checked属性赋值 101 for (var i = 0; i < tb.length; i++) { 102 tb[i].checked = this.checked 103 } 104 } 105 //循环给每个下面的复选框一个点击事件 106 for (var i = 0; i < tb.length; i++) { 107 tb[i].onclick = function () { 108 //定义一个变量，用来判断每个input的checked是否选中，如果选中，就true，如果有一个没选中，就为false 109 var flag = true 110 //循环判断每个input的checked属性 111 for (var i = 0; i < tb.length; i++) { 112 if (!tb[i].checked) { 113 //如果没选中，就将flag的值改为false 114 flag = false 115 //只要有一个为false，就结束循环 116 break 117 } 118 } 119 //最后将flag的值赋给总的复选框 120 th.checked = flag 121 } 122 } 123 </script> 124 </body> 125 </html>