JavaScript複選框實現全選、全不選、反選、提交
阿新 • • 發佈：2018-12-24
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>全選</title> <style> .container { margin:0px auto; width:500px; } </style> <script> window.onload=function(){ //獲取所有的複選框 var items=document.getElementsByName("items"); //全選/反選 //onchange事件：當元素的值發生改變時 進行觸發 document.getElementById("all").onchange=function(){ for(var i=0;i<items.length;i++){ //items[i].checked=this.checked; //items[i].setAttribute("checked",this.checked); items[i].checked=!items[i].checked;//取反 } } //全選 為按鈕新增點選事件 document.getElementById("checkedAll").onclick=function(){ for(var i=0;i<items.length;i++){ //選中 items[i].checked=true; } } //全不選 document.getElementById("checkedNo").onclick=function(){ for(var i=0;i<items.length;i++){ //選中 items[i].checked=false; } } //反選 document.getElementById("checkRev").onclick=function(){ for(var i=0;i<items.length;i++){ items[i].checked=!items[i].checked;//取反 } } //提交 document.getElementById("submit").onclick=function(){ var result=""; for(var i=0;i<items.length;i++){ if(items[i].checked){ result+=items[i].value+"\n"; } } alert(result); } } </script> </head> <body> <form action="/" method="post"> <div class="container"> <label>你愛好的運動是？</label><input type="checkbox" name="name" id="all" />全選/反選 <p> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="籃球" />籃球 <input type="checkbox" name="items" value="排球" />排球 <input type="checkbox" name="items" value="檯球" />檯球 </p> <p> <input type="button" id="checkedAll" value="全選"/> <input type="button" id="checkedNo" value="全不選" /> <input type="button" id="checkRev" value="反選" /> <input type="button" id="submit" value="提交" /> </p> </div> </form> </body> </html>