用 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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php类常量用法实例分析
2015/07/09 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
详解Python用户登录接口的方法
2019/04/17 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
virtualenv介绍及简明教程
2020/06/23 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
蓝颜请假条
2014/04/11 职场文书
抗震救灾标语
2014/06/26 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
贫困证明怎么写
2015/06/16 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers