慕课西安交通大学.WEB编程技术.第四章.JavaScript.JS练习
0 目录
4 JavaScript
4.13 JS练习
4.13.1 课堂重点
4.13.2 测试与作业
表格形表单的简单示例: 提交按钮和重置按钮实现,填写数据的打印和数据的清空
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>stuInfor</title>
<script>
function promptInfor(){
var name=document.getElementById("name").value;
var major=document.getElementById("major").value;
var hobby="";
var check=document.getElementsByName("hobby");
if(check!=null){
for(var i=0;i<check.length;i++){
if(check[i].checked==true){
hobby+=check[i].value+" ";
}
}
}
var sex=null;
var radio=document.getElementsByName("sex");
for(var i=0;i<radio.length;i++){
if(radio[i].checked==true){
sex=radio[i].value;
}
}
window.alert("姓名:"+name+" 性别:"+sex+" 爱好:"+hobby+" 专业:"+major);
}
function clearInfor(){
document.getElementById("name").value="";
document.getElementById("major").value="";
var radio=document.getElementsByName("sex");
for(var i=0;i<radio.length;i++){
if(radio[i].checked==true){
radio[i].checked=false;
}
}
var check=document.getElementsByName("hobby");
for(var i=0;i<check.length;i++){
if(check[i].checked==true){
check[i].checked=false;
}
}
//$("input:radio[name='name值']").prop("checked",false);
//$("input:radio[name='name值'][value='value值']").prop("checked",true);
}
</script>
</head>
<body>
<table width="254" height="281" border="1">
<tbody>
<tr>
<td width="41" align="center">
<strong>姓名:</strong></td>
<td width="197" align="center">
<input type="text" id="name" name="name">
</td>
</tr>
<tr>
<td align="center">
<strong>性别:</strong></td>
<td align="center">
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
<input type="radio" name="sex" value="其他">其他</td>
</tr>
<tr>
<td align="center">
<strong>爱好:</strong></td>
<td>
<input type="checkbox" name="hobby" value="音乐">音乐
<input type="checkbox" name="hobby" value="体育">体育
<input type="checkbox" name="hobby" value="阅读">阅读
</td>
</tr>
<tr>
<td align="center">
<strong>专业:</strong>
</td>
<td align="center">
<input type="text" list="marjorlist" id="major" name="major">
<datalist id="marjorlist">
<option value="计算机">
<option value="经济与管理">
<option value="车辆">
</datalist>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="提交" onClick="promptInfor()">
<input type="button" value="重置" onClick="clearInfor()">
</tr>
</tbody>
</table>
</body>
</html>
5 下一章
