用 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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
详谈js模块化规范
Jul 07 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP实现的策略模式示例
2019/03/20 PHP
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JS中数据结构之栈
2019/01/01 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Django权限设置及验证方式
2020/05/13 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
无房证明范本
2014/09/17 职场文书
中小学生学籍证明
2014/10/25 职场文书
师德师风培训感言
2015/08/03 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
vue使用echarts实现折线图
2022/03/21 Vue.js