<div class="wrap"><table border="1" cellspacing="0" cellpadding="0"><caption>恭喜發財</caption><thead><tr><th><input type="checkbox" id="j_cbAll" checked="checked"/></th><th>商品</th><th>價錢</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox"/></td><td>蘋果</td><td>8000</td></tr><tr><td><input type="checkbox"/></td><td>華為</td><td>9000</td></tr><tr><td><input type="checkbox"/></td><td>小米</td><td>19999</td></tr><tr><td><input type="checkbox"/></td><td>小米+</td><td>20000</td></tr></tbody></table></div>

<style type="text/css">table{width: 200px;margin: 50px auto;text-align: center;border-collapse: collapse; /* border-collapse: collapse;  改變線性 */font-size: 14px;}thead tr{color: white;height: 30px;background-color: #63b5ef;}tbody tr{height: 30px;}tbody td{border-bottom: 1px solid #2177b5;font-size: 12px;color: #727679;}.bg{color: black;background-color: rgba(223, 189, 214,0.5);}table caption{font-weight: bold;font-size: 20px;}</style>

<script type="text/javascript">//獲取相應的元素var j_cbAll = document.getElementById('j_cbAll');//獲取thead中th的全選按鈕var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //獲取<tbody>中td的選擇按鈕//注冊點擊事件//全選與不全選的制作j_cbAll.onclick = function(){//console.log(this.checked);//測試復選框是否已經選中，true選中,false沒選中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked; //讓j_tbs中的按鈕和j_cbAll的按鈕屬性相等}}//用j_cbAll的按鈕去影響j_tbs中的按鈕//設置一個變量來確定是否全部選中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function(){var flag = true;//設置一個屬性，用來控制按鈕是否選中//每次點擊后都要檢查td中的按鈕是否都被點中	for (var i = 0; i < j_tbs.length; i++) {if(!j_tbs[i].checked){// 前面添加 ! 是屬于j_tbs中某個按鈕沒有被選中 flag = false;}}j_cbAll.checked = flag;}}</script>

實現效果：