用 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 相关文章推荐
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
用 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python re模块介绍
2014/11/30 Python
python实现的简单猜数字游戏
2015/04/04 Python
Django的分页器实例(paginator)
2017/12/01 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python----数据预处理代码实例
2019/03/20 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python编写打字训练小程序
2019/09/26 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
男方婚礼答谢词
2015/01/20 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis