用 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的Cookies
Jan 16 Javascript
Jquery cookie操作代码
Mar 14 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
浅谈JavaScript字符集
May 22 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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+swoole实现简单多人在线聊天群发
2016/01/19 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python命名空间详解
2014/08/18 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
jupyter notebook 多行输出实例
2020/04/09 Python
岗位廉洁从业承诺书
2014/03/28 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2015入党自荐书范文
2015/03/05 职场文书
中标通知书格式
2015/04/17 职场文书
高老头读书笔记
2015/06/30 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书