用 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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
js模糊查询实例分享
Dec 26 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
vue iview实现动态路由和权限验证功能
Apr 17 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中使用hidef扩展代替define提高性能
2015/04/09 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
餐厅筹备计划书
2014/04/25 职场文书
审计班子对照检查材料
2014/08/27 职场文书
我的中国心演讲稿
2014/09/04 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
社区节水倡议书
2015/04/29 职场文书
父亲去世追悼词
2015/06/23 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers