用 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 相关文章推荐
模仿百度三维地图的js数据分享
May 12 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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脚本的10个技巧(4)
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
几种响应式文字详解
2017/05/19 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
详解python中的json和字典dict
2018/06/22 Python
python使用PyQt5的简单方法
2019/02/27 Python
python程序变成软件的实操方法
2019/06/24 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Python socket模块方法实现详解
2019/11/05 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python多进程使用函数封装实例
2020/05/02 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python如何根据时间序列数据作图
2020/05/12 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
历史学专业推荐信
2013/11/06 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
初中军训感言
2015/08/01 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript