【JS】用checked實現複選框全選和全不選
阿新 • • 發佈：2018-11-08
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title> </head> <body> <form> 請選擇你愛好:<br> <input type="checkbox" name="hobby" id="hobby1"> 音樂 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"> 游泳 <input type="checkbox" name="hobby" id="hobby4"> 閱讀 <input type="checkbox" name="hobby" id="hobby5"> 打球 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br> <input type="button" value = "全選" onclick = "checkall();"> <input type="button" value = "全不選" onclick = "clearall();"> <p>請輸入您要選擇愛好的序號，序號為1-6:</p> <input id="wb" name="wb" type="text" > <input name="ok" type="button" value="確定" onclick = "checkone();"> </form> <script type="text/javascript"> function checkall(){ var t1 = document.getElementsByTagName("input"); for(var i=0;i<t1.length;i++){ if(t1[i].type=='checkbox'){ t1[i].checked=true; } } } function clearall(){ var t2 = document.getElementsByName("hobby"); for(var i=0;i<t2.length;i++){ if(t2[i].type=='checkbox'){ t2[i].checked=false; } } } function checkone(){ var j=document.getElementById("wb").value; j=parseInt(j)-1; console.log(j) var t3 = document.getElementsByName('hobby'); if(t3[j].type=='checkbox'){ if(j<=t3.length){ t3[j].checked=true; } } } </script> </body> </html>
實現效果：
