用 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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
vue路由跳转传参数的方法
May 06 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue2实现provide inject传递响应式
May 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
模拟flock实现文件锁定
2007/02/14 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP积分兑换接口实例
2015/02/09 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
React组件refs的使用详解
2018/02/09 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python 矩阵增加一行或一列的实例
2018/04/04 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
党员一句话承诺大全
2014/03/28 职场文书
房产继承公证书
2014/04/09 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
审计专业自荐信范文
2014/04/21 职场文书
给老婆的检讨书
2015/01/27 职场文书