用 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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JavaScript 特殊字符
Apr 05 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JSONP原理及简单实现
Jun 08 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 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获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python实现注册登录系统
2017/08/08 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
使用Python写一个小游戏
2018/04/02 Python
Python交互环境下实现输入代码
2018/06/22 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
写好自荐信的几个要点
2013/12/26 职场文书
警察思想汇报
2014/01/04 职场文书
个人委托书范本
2014/04/02 职场文书
三严三实对照检查材料
2014/09/22 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
龙猫观后感
2015/06/09 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL