按鈕全選和取消全選
阿新 • • 發佈：2022-04-18
<style> * { margin: 0; padding: 0; } table { width: 500px; position: relative; margin: 100px auto; border-collapse: collapse; border: 1px solid #d7d7d7; } thead tr { background-color: #222; font-weight: 600; color: #e9e9e9; } tbody tr:hover { background: #f5f5f5; } table tr { text-align: center; height: 30px; } </style> </head> <body> <table border="1"> <thead> <tr> <td><input type="checkbox" id="cekall" /></td> <td>商品</td> <td>價錢</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" /></td> <td>iPhone 11</td> <td>5999.0</td> </tr> <tr> <td><input type="checkbox" name="" id="" /></td> <td>榮耀20</td> <td>2299.0</td> </tr> <tr> <td><input type="checkbox" name="" id="" /></td> <td>iPhone XR</td> <td>4499.0</td> </tr> </tbody> </table> <!-- 全選: --> <!-- <input type="checkbox" style="width: 50px; height: 25px" id="a_a" /><br /> <input type="checkbox" id="a_b" /><br /> <input type="checkbox" id="a_c" /><br /> <input type="checkbox" id="a_d" /> --> </body> <script> // 1、全選和取消全選做法：讓下面所有複選框的 checked屬性（選中狀態）跟隨全選按鈕即可 // 獲取元素，獲取全選按鈕和下面小的複選框 var cekall = document.getElementById("cekall"); var inp = document.querySelector("tbody").getElementsByTagName("input"); // 註冊事件 cekall.onclick = function () { // this.checked 可以得到當前複選框的選中狀態，如果是 true 就是選中，如果是 false 就是未選中 console.log(this.checked); for (var i = 0; i < inp.length; i++) { inp[i].checked = this.checked; } }; // 2、下面的複選框要全部選中，上面的全選按鈕才能夠全部選中，給下面的所有複選框繫結事件，每次點選，都要迴圈檢視下面下面所有的複選框是否有沒選中的，如果有沒選中的複選框，那麼上面的全選按鈕就不選中。 for (var i = 0; i < inp.length; i++) { inp[i].onclick = function () { // 設定一個變數來控制按鈕是否全部選中 var flag = true; // 每次點選下面的複選框都要檢查下面的四個小按鈕是否被全部選中。 for (var i = 0; i < inp.length; i++) { if (!inp[i].checked) { flag = false; } } cekall.checked = flag; }; } </script>