用 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实现对ajax请求面向对象的封装
Jan 08 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
js date 格式化
Feb 15 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
element跨分页操作选择详解
Jun 29 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/06/16 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
js获取div高度的代码
2008/08/09 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
浅谈Python的文件类型
2016/05/30 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
django主动抛出403异常的方法详解
2019/01/04 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
小学班级特色活动方案
2014/08/31 职场文书
见习报告格式要求
2014/11/04 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
python中的3种定义类方法
2021/11/27 Python