用 Javascript 验证表单(form)中的单选(radio)值


Posted in Javascript onSeptember 08, 2009

本文介绍了一个较为通用的获取 radio 值的方法,希望对新手有用。

<script type="text/javascript"> 
// 说明: 用 Javascript 验证表单(form)中的单选(radio)值 
// 作者: CodeBit 
function getRadioValue(radio) 
{ 
if (!radio.length && radio.type.toLowerCase() == 'radio') 
{ return (radio.checked)?radio.value:''; } 
if (radio[0].tagName.toLowerCase() != 'input' || 
radio[0].type.toLowerCase() != 'radio') 
{ return ''; } 
var len = radio.length; 
for(i=0; i<len; i++) 
{ 
if (radio[i].checked) 
{ 
return radio[i].value; 
} 
} 
return ''; 
} 
</script>

radio 和 checkbox 一样,都是 name 相同,值有多个,在获取 radio 值的时候,我们不能按照普通文本框 .value 的方式,而是要判断哪个被选中了。

当一组 radio 有多个选项时,我们可以通过循环,以 radio[i] 的方式判断某个选项是否被选中来返回值,但是当一组 radio 只有一个选项时,获取值的方式又有变化,代码中以 return (radio.checked)?radio.value:''; 这样的方式直接判断是否选中,然后返回对应值。

上面的代码传入的参数是 radio 对象,如:

var radioTest = document.forms['testForm'].elements['radioTest']; 
if (getRadioValue(radioTest) == '') 
{ ...... }

根据判断结果执行你想要的操作。
Javascript 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
JavaScript中的 new 命令
May 22 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 #Javascript
Javascript String.replace的妙用
Sep 08 #Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 #Javascript
javascript 流畅动画实现原理
Sep 08 #Javascript
javascript 定义初始化数组函数
Sep 07 #Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 #Javascript
javascript 获取select下拉列表值的代码
Sep 07 #Javascript
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
解析vue、angular深度作用选择器
2019/09/11 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
自我鉴定标准格式
2014/03/19 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
企业宣传稿范文
2015/07/23 职场文书