js複選框實現全選、全不選、反選
阿新 • • 發佈：2018-12-24
通過input就可以將一個簡單的複選框呈現在頁面上
<input type="checkbox" />要實現的大概就是這樣一個頁面
思路
全選
因為要得到複選框陣列，而id又不能重複。所以通過name來得到複選框陣列。得到陣列後遍歷，將所有checked值設定為true即可實現全選，全不選原理相同
反選
同樣的方法得到複選框陣列，遍歷的時候判斷如果checked值為true則改為false，checked值為false則改為true
最上面的全選/全不選功能
通過id獲得最上面的複選框，判斷其checked值若為true則將所有的複選框設定為true,為false則設定為false
注意
為什麼不是true的時候設定為false呢？因為當點選的時候複選框已發生變化，這個時候，下面的複選框應該是與上面一致的
原始碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>複選框</title> <style type="text/css"> </style> </head> <body> <input type="checkbox" id="boxid" onclick="setAllNo()" />全選/全不選 <br /> <input type="checkbox" name="love" value="1"/>籃球 <br /> <input type="checkbox" name="love" value="2"/>排球 <br /> <input type="checkbox" name="love" value="3"/>羽毛球 <br /> <input type="checkbox" name="love" value="4"/>乒乓球 <br /> <input type="button" value="全選" onclick="setAll()" /> <input type="button" value="全不選" onclick="setNo()" /> <input type="button" value="反選" onclick="setOthers()" /> <input type="button" value="獲取值" onclick="value()" id="checkAll"> <script type="text/javascript"> //全選函式 function setAll() { var loves = document.getElementsByName("love"); for (var i = 0; i < loves.length; i++) { loves[i].checked = true; } } //全不選函式 function setNo() { var loves = document.getElementsByName("love"); for (var i = 0; i < loves.length; i++) { loves[i].checked = false; } } //反選 function setOthers() { var loves = document.getElementsByName("love"); for (var i = 0; i < loves.length; i++) { if (loves[i].checked == false) loves[i].checked = true; else loves[i].checked = false; } } //全選/全不選操作 function setAllNo(){ var box = document.getElementById("boxid"); var loves = document.getElementsByName("love"); if(box.checked == false){ for (var i = 0; i < loves.length; i++) { loves[i].checked = false; } }else{ for (var i = 0; i < loves.length; i++) { loves[i].checked = true; } } } //選擇value值 function value(){ obj = document.getElementsByName("love"); check_val = ''; for (k in obj) { if (obj[k].checked) check_val += obj[k].value + ','; } } </script> </body> </html>