JavaScript操作文本框、单选按钮、下拉框、复选框

来源：互联网发布：知乎推送话题更改编辑：程序博客网时间：2024/04/29 05:11

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript操作文本框、单选按钮、下拉框、复选框</title>
<script type="text/javascript">
function show(){
var nameNode=document.getElementById("name");
var sexNode=document.getElementById("sex");
var deptNode=document.getElementById("dept");
var instNode=document.getElementsByName("inst");
var str="";
alert("姓名: "+nameNode.value);
alert("性别: "+sexNode.value);
alert("部门: "+deptNode.value);
for(var x=0;x<instNode.length;x++){
if(instNode[x].checked){
str+=instNode[x].value+" ";
}
}
alert("兴趣: "+str);
}
</script>
<body>
<form action="" method="post">
姓名:<input type="text" name="name" id="name" placeholder="请输入姓名"/><br/>
性别:<input type="radio" name="sex" id="sex" value="男" checked>男  
<input type="radio" name="sex" id="sex" value="女">女<br/>
部门:<select name="dept" id="dept">
<option value="技术部">技术部</option>
<option value="测试部">测试部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
</select><br/>
兴趣:<input type="checkbox" name="inst" value="Java" checked>Java
<input type="checkbox" name="inst" value="MySql">MySql
<input type="checkbox" name="inst" value="Linux">Linux
<input type="checkbox" name="inst" value="Tomcat">Web Server<br/>
<input type="button" value="显示" onclick="show()"> 
<input type="reset" value="重置">
</form>
</body>
</html>

阅读全文

0 0