上一篇js教程学习了:js初学者实例教程(7):注册表单验证
实例八
本实例主要介绍了document对象读取表单元素的使用(单选按钮、复选按钮的使用)
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<script language="javascript">
<!--
function sel_coun(){
var country = document.form1.country.length; //得到radio个数
for(var i=0;i<country;i++){
if(form1.country[i].checked){
alert(form1.country[i].value);
break;
}else{
continue;
}
}
}
function sel_love(){
var country = document.form1.love.length; //得到checkbox个数
var love =""; //new array();
for(var i=0;i<country;i++){
if(form1.love[i].checked){
love+=form1.love[i].value+"、";
}
}
love = love.substring(0,love.lastindexof("、"));
alert("你的爱好有:"+love)
}
//-->
</script>
</head>
<body>
<form name ="form1" method=post action="">
单选应用
<input type="radio" name="country" value="中国" checked>中国
<input type="radio" name="country" value="法国">法国
<input type="radio" name="country" value="美国">美国
<input type="button" value="提交" onclick="sel_coun();"/><br/>
复选应用
<input type="checkbox" name="love" value="打球">打球
<input type="checkbox" name="love" value="游泳">游泳
<input type="checkbox" name="love" value="看书">看书
<input type="checkbox" name="love" value="跳舞">跳舞
<input type="button" value="提交" onclick="sel_love();"/><br/>
</form>
</body>
</html>
效果演示:
[ctrl+a 全部选择 提示:你可先修改部分代码,再按运行]
新闻热点
疑难解答