JS實現複選框的全選和全不選
阿新 • • 發佈：2019-01-04
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無標題文件</title> </head> <body> <form> <!-- 當 type="radio" 時，控制元件為單選框 當 type="checkbox" 時，控制元件為複選框--> 請選擇你愛好:<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 hobby = document.getElementsByTagName("input"); var i; for(i = 0;i < hobby.length;++i){ hobby[i].checked=true; } // 任務1 } function clearall(){ var hobby = document.getElementsByName("hobby"); var i; for(i= 0;i < hobby.length;++i){ hobby[i].checked=false; } // 任務2 } function checkone(){ var j=document.getElementById("wb").value; j = Number(j); var hobby = document.getElementsByName("hobby"); if(j < 1 || j > 6){ alert("請輸入正確的值"); }else{ hobby[j - 1].checked = true; } // 任務3 } </script> </body> </html>