<!DOCTYPE?HTML>
<html>??
<head>??
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>??
<title>9章-4練習</title>??
</head>??
?<body?onload="clearall()">
????????<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="number"??onKeyPress="if?(event.keyCode?==?13)?checkone()">
<!--建議：把<input?id?=?"wb"?name?=?"wb"?type?=?"text">中，type修改為?type="number"-->
<!--這樣只要用戶輸入了非數字，也能走代碼中1-6以外的輸入判定條件。-->
??????????<input?name="ok"?type="button"?value="確定"?onclick?=?"checkone();">
????????</form>
????????<script?type="text/javascript">
????????function?checkall(){
?????????var?hobby?=?document.getElementsByName("hobby");
for(var?i=0;i<hobby.length;i++)
{
hobby[i].checked=true;
}
document.getElementById("wb").value="";
????????}
????????function?clearall(){
?var?hobby?=?document.getElementsByName("hobby");
for(var?i=0;i<hobby.length;i++)
{
hobby[i].checked=false;
}
document.getElementById("wb").value="";
????????}
????????function?checkone(){
var?hobby?=?document.getElementsByName("hobby");
var?j=document.getElementById("wb").value;
for(var?i=0;i<hobby.length;i++)
{
hobby[i].checked=false;
}
????????????
if(j%1!=0){
????????alert("你的輸入有誤\n正確的范圍在1~6的整數\n請重新輸入");//\n代表回車換行顯示文alert提示文字。
document.getElementById("wb").value="";//輸入有誤，清除輸入框
}
else?if(j<1||j>6)
{
alert("你的輸入有誤\n正確的范圍在1~6的整數\n請重新輸入");
document.getElementById("wb").value="";//輸入有誤，清除輸入框
}
else?
{
hobby[j-1].checked=true
}
?????????//?任務3
????????}
????????window.onload=function()
{
clearall();
document.getElementById("wb").value="";
}
????????</script>
????</body>
</html>前兩個任務，我用的document.getElementsByName("hobby")?第三個任務，我想添加一個輸入框輸入完數字以后，若按下回車鍵，就執行后面"確定"按鈕所執行的函數，也就是函數checkone()。我在代碼中加粗的那一行input里添加?onKeyPress="if (event.keyCode == 13) checkone()"???這一句代碼，用火狐瀏覽器調試的時候發現，輸入框里輸入1-6的整數以后，回車，先是勾選了對應的選項，然后又像F5刷新瀏覽器一樣立馬去掉了勾選，請幫忙看看代碼哪里出了問題。
JavaScript進階篇 第9章-4這一節,任務三求助, "輸入框按回車實現單選"
小三是籃球
2016-06-02 22:03:18