實現效果：
全選按鈕：點擊全選按鈕所有的小按鈕都會被選中；點掉全選按鈕，所有按鈕取消選中；
小按鈕：只有全部被選中，全選按鈕才會被選中
思路分析：
1、全選和取消全選做法：讓下面所有復選框的 checked屬性（選中狀態）跟隨全選按鈕即可
使用 this.checked 可以獲得當前復選框的狀態，如果是true就代表被選中，如果是false就代表沒被選中。
注：<input>的 checked 屬性是一個布爾屬性，checked 屬性規定在頁面加載時應該被預先選定的<input> 元素。
inp[i].checked = this.checked; 使下面所有的復選框的checked屬性值等同於 全選按鈕的checked值，跟隨全選按鈕的狀態。
this.checked 得到的是 true或是 false，如果是true，就把true賦值給所有下面的復選框的 checked屬性。
想實現全選和取消全選，最核心的思路就在於：把全選按鈕當前是否選中的狀態，將這個狀態賦給下面所有復選框
2、下面的復選框需要全部選中，上面全選按鈕才是選中狀態的做法：（下面復選框的小按鈕有一個沒被選中，那么全選按鈕也是沒被選中的狀態）給下面的復選框綁定點擊事件，每次點擊都要循環查看下面復選框是否還有沒被選中的，如果有一個沒被選中的，上面全選就不選中。
3、可以設置一個變量來控制全選按鈕是選中還是沒選中。var flag=true；
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表單全選+取消全選</title> 6 <style> 7 *{ 8 margin:0;padding: 0; 9 } 10 table{ 11 width:500px; 12 position:relative; 13 margin:100px auto; 14 border-collapse:collapse; 15 border:1px solid #d7d7d7; 16 } 17 thead tr{ 18 background-color:#222; 19 font-weight: 600; 20 color:#e9e9e9; 21 } 22 tbody tr:hover{ 23 background: #F5F5F5; 24 } 25 table tr{ 26 text-align: center; 27 height:30px; 28 } 29 </style> 30 </head> 31 <body> 32 <table border=1> 33 <thead> 34 <tr> 35 <td><input type="checkbox" id='cekall'></td> 36 <td>商品</td> 37 <td>價錢</td> 38 </tr> 39 </thead> 40 <tbody> 41 <tr> 42 <td><input type="checkbox" name="" id=""></td> 43 <td>iPhone 11</td> 44 <td>5999.0</td> 45 </tr> 46 <tr> 47 <td><input type="checkbox" name="" id=""></td> 48 <td>榮耀20</td> 49 <td>2299.0</td> 50 </tr> 51 <tr> 52 <td><input type="checkbox" name="" id=""></td> 53 <td>iPhone XR</td> 54 <td>4499.0</td> 55 </tr> 56 </tbody> 57 </table> 58 </body> 59 <script> 60 61 // 1、全選和取消全選做法：讓下面所有復選框的 checked屬性（選中狀態）跟隨全選按鈕即可 62 // 獲取元素，獲取全選按鈕和下面小的復選框 63 var cekall = document.getElementById('cekall'); 64 var inp = document.querySelector('tbody').getElementsByTagName('input'); 65 // 注冊事件 66 cekall.onclick = function(){ 67 // this.checked 可以得到當前復選框的選中狀態，如果是 true 就是選中，如果是 false 就是未選中 68 console.log(this.checked); 69 for(var i=0; i< inp.length; i++){ 70 inp[i].checked = this.checked; 71 } 72 } 73 // 2、下面的復選框要全部選中，上面的全選按鈕才能夠全部選中，給下面的所有復選框綁定事件，每次點擊，都要循環查看下面下面所有的復選框是否有沒選中的，如果有沒選中的復選框，那么上面的全選按鈕就不選中。 74 for(var i = 0; i<inp.length; i++){ 75 inp[i].onclick = function(){ 76 // 設置一個變量來控制按鈕是否全部選中 77 var flag = true; 78 // 每次點擊下面的復選框都要檢查下面的四個小按鈕是否被全部選中。 79 for(var i =0; i<inp.length; i++){ 80 if(!inp[i].checked){ 81 flag = false; 82 } 83 } 84 cekall.checked = flag; 85 } 86 } 87 </script> 88 </body> 89 </html>
實現效果：
點擊全選按鈕
