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

2016-02-20 00:47 43 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的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/webkaifa/)

来源:http://www.tulaoshi.com/n/20160220/1632526.html

延伸阅读
标签: PS PS教程
本文由 中国 webkxq2007   原创,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 先看下最终效果: [next] 一、点击文件——新建,或按Ctrl+n新建一个文件如图设置 二、设置前景色:d5caa8 ...
标签: PS PS教程
这是一幅人物外景照片,因为种种原因,不可能到原地重拍,所以很有纪念意义。必须想法使其正常美观。 本题目的,在于使初学者了解并掌握裁剪工具除了正常裁剪以外的用法。 先看原图和效果图: [next] 一、首先点击图片最大化按钮,用裁剪工具沿图片边沿拉出裁减框 二、将光标放到裁剪框外,待光标变成弯曲的双向箭头时,拖动光...
标签: PS PS教程
本文由 中国 webkxq2007   原创,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 用浮雕效果滤镜和图层混合模式制作木纹压花,当然你可以选择别的材质做自己喜欢的效果。希望大家能够举一反三,融汇贯通...
标签: PS PS教程
本文由 中国 yntbw(一把火) 原创,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 更多初学者实例教程: http://www.jcwcn.com/portal-topic-topicid-9.html 原图: 效果: [next] 步骤: 1、...
标签: PS PS教程
本着简单易记的原则,教大家做一种效果字,切记:跟做不是目的,掌握方法,动脑子学习,举一反三作出自己喜欢的式样。 先请看效果 [next] 新建文件,尺寸自定,够用即可,这里我定的是600*250像素的白底作为背景 设置前景色为红色,按alt+delete填充。 然后用文字蒙板工具,选择自己喜欢的字体并设置字体大小,在图中输入文字选区,按...

经验教程

491

收藏

97
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部