js 多選項的全選和反選
阿新 • • 發佈：2019-02-10
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box,#top{ width: 300px; text-align: center; } li{ list-style-type: none; } </style> <script> window.onload = function() { var bts = document.getElementsByTagName("button"); var inputList = document.getElementById("box").getElementsByTagName("input"); //封裝函式 function tagp(lag){ for(var i=0;i<inputList.length;i++){ inputList[i].checked = lag; } } bts[0].onclick = function(){tagp(true)}; bts[1].onclick = function(){ for(var i=0;i<inputList.length;i++){ if(inputList[i].checked){ inputList[i].checked = false; }else{ inputList[i].checked = true; } } } bts[2].onclick = function(){tagp(false)}; } </script> </head> <body> <div id="top"> <button>全選</button> <button>反選</button> <button>取消</button> </div> <div id="box"> <li>選擇<input type="checkbox"></li> <li>選擇<input type="checkbox"></li> <li>選擇<input type="checkbox"></li> <li>選擇<input type="checkbox"></li> <li>選擇<input type="checkbox"></li> <li>選擇<input type="checkbox"></li> </div> </body> </html>