给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JS初学者实例教程(8):单选按钮、复选按钮,过去的都会过去,迎接崭新的开始,释放更美好的自己。
【 tulaoshi.com - Web开发 】
上一篇学习了:JS初学者实例教程(7):注册表单验证
实例八
本实例主要介绍了Document对象读取表单元素的使用(单选按钮、复选按钮的使用)
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/) !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;icountry;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;icountry;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 全部选择 提示:你可先修改部分代码,再按运行]
来源:http://www.tulaoshi.com/n/20160220/1632526.html
看过《JS初学者实例教程(8):单选按钮、复选按钮》的人还看了以下文章 更多>>