checkbox input 輸入控制練習（過濾小數、非數字、超範圍）
阿新 • • 發佈：2019-02-08
<!-- 此頁是對CheckBox和input框的練習，任務 1.實現當點選"全選"按鈕時，將選中所有的複選項。 提示:document.getElementsByTagName("input")獲取的是所有input標籤，包括複選項和按鈕，所以要判斷是否是複選項，如是選中。 2.實現當點選"全不選"按鈕時，將取消所有選中的複選項。 3.在文字框中輸入輸入1-6數值，當點選"確定"按鈕時，根據輸入的數值，通過id選中相應的複選項。 提示：要對輸入值進行判斷parseInt(j)>6||parseInt(j)<1||isNaN(j)||j.indexOf(".")!=-1，不能是>6 <1 小數 不能是非數字 當提示輸入有誤後應該清空輸入框document.getElementById("wb").value=''; 同樣，輸入正確執行選擇之後也要清空輸入框，方便下一次選擇。 --> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>checkbox練習</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 hobby = document.getElementsByTagName("input"); // 任務1 for(var i=0;i<hobby.length;i++){ if(hobby[i].type=="checkbox"){ hobby[i].checked=true; } } } function clearall(){ var hobby = document.getElementsByName("hobby"); // 任務2 for(var i=0;i<hobby.length;i++){ if(hobby[i].type=="checkbox"){ hobby[i].checked=false; } } } // 任務3 function checkone(){ var j=document.getElementById("wb").value; if(parseInt(j)>6||parseInt(j)<1||isNaN(j)||j.indexOf(".")!=-1) { alert("請輸入1-6之間的整數"); document.getElementById("wb").value=''; }else{ var hobby=document.getElementsByName("hobby"); hobby[j-1].checked=true; document.getElementById("wb").value=''; } } </script> </body> </html>