<!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刷新浏览器一样立马去掉了勾选，请帮忙看看代码哪里出了问题。
相关分类