当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS初学者实例教程(8):单选按钮、复选按钮

Javascript
js 方法实现返回多个数据的代码
Ext 表单布局实例代码
javascript document.referrer 用法
JavaScript 字符编码规则
JS 动态加载脚本的4种方法
jQuery textarea的长度进行验证
jQuery select的操作实现代码
jQuery 1.2.x 升級 1.3.x 注意事项
关于viewport,Ext.panel和Ext.form.panel的关系
日期 时间js控件
JavaScript的parseInt 进制问题
javascript 有用的脚本函数
javascript 两个字符串比较函数
javascript 代码运行器
js arguments.callee的应用代码
JavaScript Table排序 2.0 (更新)
给Function做的OOP扩展
<script defer> defer 是什么意思
FF和IE之间7个JavaScript的差异
javascript获取当前ip的代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 184 ::
收藏到网摘: n/a

实例八

本实例主要介绍了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 全部选择 提示:你可先修改部分代码,再按运行]