JavaScript實現複選框全選或全取消操作
阿新 • • 發佈:2021-10-04
本文例項為大家分享了 + element ui實現錨點定位的具體程式碼,供大家參考,具體內容如下
實現思路
1、獲取總選框、所有小選框元素物件
2、按鈕控制小按鈕- - -給總選框繫結onclick點選事件,事件處理程式- - -for迴圈遍歷所有小選框,將總選框的- - -checked屬性值- - -賦值給它們
3、小按鈕影響總按鈕- - -for迴圈 給每個小複選框繫結點選事件,每次點選都 for迴圈 檢查所有的複選框是否被選中:
設定一個變數 flag 控制總按鈕的選中狀態,初始值為 true ,for迴圈遍歷檢查各小複選框選中狀態,只要有一個沒有選上,flag = false,break 跳出迴圈不再檢查後面的小複選框狀態,最後 總按鈕checked屬性值 = flag
注意:在html中選中狀態 checked = “checked”,但是在中,選中狀態- - -checked = true; 未選中狀態- - -checked = false;
建議:這種取屬性值的,可以在控制檯列印一下,看下值是多少
程式碼示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>多選框</title> <style> .box { width: 300px; margin: 100px auto; } hdAVhthead { color: #fff; background-color: #008dd0; } </style> </head> <body> <div class="box"> <table border="1" cellspacing="0" cellpadding="5" width="200" align="center"> <thead> <tr> <th><input type="checkbox" value="0" id="cbAll"></th> <th>運動</th> www.cppcns.com </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" value="1"></td> <td>跑步</td> </tr> <tr> <td><input type="checkbox" value="2"></td> <td>跳繩</td> </tr> <tr> <td><input type="checkbox" value="3"></td> <td>瑜伽</td> </tr> <tr> <td><input type="checkbox" value="4"></td> <td>游泳</td> 客棧 </tr> <tr> <td><input type="checkbox" value="5"></td> <td>騎行</td> </tr> </tbody> </table> </div> <script> var all = document.querySelector('#cbAll'); var sports = document.querySelector('#tb').querySelectorAll('input'); // 給全選按鈕繫結點選事件 all.onclick = function() { console.log(all.checked); for (var i = 0; i < sports.length; i++) { sports[i].checked = all.checked; } } // 給每個小複選框繫結點選事件 for (var i = 0; i < sports.length; i++) { sports[i].onclick = function() { // 控制全選按鈕是否選中 var flag = true; // 每次點選一個小框,都檢查是否所有複選框都被選中 for (var i = 0; i < sports.length; i++) { if (!sports[i].checked) { flag = false; break; // 只要有一個小複選框沒有被選中,全選按鈕就沒被選中,可跳出迴圈,下面小複選框不用再判斷 www.cppcns.com } } all.checked = flag; } } </script> </body> </html>
頁面效果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。