用 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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
js实现抽奖功能
Nov 24 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计算程序运行时间的简单例子分享
2014/05/10 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
面试常见的js算法题
2017/03/23 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python的socket编程入门
2018/01/29 Python
深入浅析Python传值与传址
2018/07/10 Python
对python模块中多个类的用法详解
2019/01/10 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python any()函数的使用方法
2019/10/28 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python怎么删除缓存文件
2020/07/19 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
考试没考好检讨书
2014/01/31 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
招股说明书范本
2014/05/06 职场文书
团结演讲稿范文
2014/05/23 职场文书
田径运动会通讯稿
2014/09/13 职场文书
房屋租房协议书范本
2014/12/04 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书