JS初学者实例教程(8):单选按钮、复选按钮

乔霾佑13

乔霾佑13

2016-02-20 00:47

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JS初学者实例教程(8):单选按钮、复选按钮,过去的都会过去,迎接崭新的开始,释放更美好的自己。

上一篇学习了:JS初学者实例教程(7):注册表单验证

实例八

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

本实例主要介绍了Document对象读取表单元素的使用(单选按钮、复选按钮的使用)

(本文来源于图老师网站,更多请访问http://m.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 全部选择 提示:你可先修改部分代码,再按运行]

展开更多 50%)
分享

猜你喜欢

JS初学者实例教程(8):单选按钮、复选按钮

Web开发
JS初学者实例教程(8):单选按钮、复选按钮

Photoshop初学者实例教程:磨砂玻璃按钮简单做

PS PS教程
Photoshop初学者实例教程:磨砂玻璃按钮简单做

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JS初学者实例教程(7):注册表单验证

Web开发
JS初学者实例教程(7):注册表单验证

js获取单选按钮的数据

Web开发
js获取单选按钮的数据

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JS初学者实例教程(6):Document对象读取表单元素

Web开发
JS初学者实例教程(6):Document对象读取表单元素

Javascript初学者实例教程(5):Document对象

Web开发
Javascript初学者实例教程(5):Document对象

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

像微软WindowsXP系统一样使用Vista

像微软WindowsXP系统一样使用Vista

IE7中网页动态创建iframe时边框问题

IE7中网页动态创建iframe时边框问题
下拉加载更多内容 ↓