用 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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
python执行get提交的方法
2015/04/29 Python
python中as用法实例分析
2015/04/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python测试人员需要掌握的知识
2018/02/08 Python
解决DataFrame排序sort的问题
2018/06/07 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
浅析python标准库中的glob
2020/03/13 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
违反学校规定检讨书
2014/01/18 职场文书
图书室管理制度
2014/01/19 职场文书
师范生见习报告
2014/10/31 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL