js實現全選和全不選
阿新 • • 發佈:2020-07-29
本文例項為大家分享了js實現全選和全不選的具體程式碼,供大家參考,具體內容如下
非常簡潔的幾行原生js實現全選和全不選,大神們可以在此基礎上加上反選功能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全選、全不選</title> </head> <body> <table border="1"> <tr> <td><input type="checkbox" name="mmAll" onclick="All(this,'mm[]')"></td> </tr> <tr><td><input type="checkbox" value="1" name="mm[]" class="check" id="ids1" onclick="Item(this,'mmAll')"></td></tr> <tr><td><input type="checkbox" value="2" name="mm[]" class="check" id="ids2" onclick="Item(this,'mmAll')"></td></tr> <tr><td><input type="checkbox" value="3" name="mm[]" class="check" id="ids3" onclick="Item(this,'mmAll')"></td></tr> <tr><td><input type="checkbox" value="4" name="mm[]" class="check" id="ids4" onclick="Item(this,'mmAll')"></td></tr> <tr><td><input type="checkbox" value="5" name="mm[]" class="check" id="ids5" onclick="Item(this,'mmAll')"></td></tr> <tr><td><input type="checkbox" value="6" name="mm[]" class="check" id="ids6" onclick="Item(this,'mmAll')"></td></tr> </table> </body> </html> <script type="text/javascript"> //Check all function All(e,itemName) { var aa = document.getElementsByName(itemName); for (var i=0; i < aa.length; i++) aa[i].checked = e.checked; //得到那個總控的複選框的選中狀態 } //Single select function Item(e,allName) { var all = document.getElementsByName(allName)[0]; if(!e.checked) all.checked = false; else { var aa =document.getElementsByName(e.name); for (var i=0; i<aa.length; i++) if(!aa[i].checked) return; all.checked= true; } } </script>
效果圖:
更多關於複選框的文章請點選專題:javascript複選框操作彙總、jquery複選框操作彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。