用 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 相关文章推荐
实现只能输入数字的input不用replace方法
Sep 12 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
js实现拖拽效果
Feb 12 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
vue 自定义组件添加原生事件
Apr 21 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
php获取后台Job管理的实现代码
2011/06/10 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
简单的通用表达式求10乘阶示例
2014/03/03 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python Property属性的2种用法
2015/06/21 Python
python fabric实现远程部署
2017/01/05 Python
Django之模板层的实现代码
2019/09/09 Python
基于Python解密仿射密码
2019/10/21 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python类中super() 的使用解析
2019/12/19 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
写好求职信第一句话的技巧
2013/10/26 职场文书
环境建设实施方案
2014/03/14 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
老干部座谈会主持词
2015/07/03 职场文书
学生病假条怎么写
2015/08/17 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技