用 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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jquery中post方法用法实例
Oct 21 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
react使用CSS实现react动画功能示例
May 18 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php获取参数的几种方法总结
2014/02/18 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
详解React 元素渲染
2020/07/07 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
200 行python 代码实现 2048 游戏
2018/01/12 Python
django缓存配置的几种方法详解
2018/07/16 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python函数和模块的使用总结
2019/05/20 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
十佳班主任事迹材料
2014/01/18 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
中职生自荐信范文
2014/06/15 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
个人违纪检讨书
2014/09/15 职场文书
开展警示教育活动总结
2015/05/09 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
python基于tkinter制作无损音乐下载工具
2021/03/29 Python