当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用 Javascript 验证表单(form)中的单选(radio)值

Javascript
Javascript 学习笔记 错误处理
Javascript 类的继承实现代码
JavaScript 创建对象和构造类实现代码
JavaScript 学习小结(适合新手参考)
extjs 列表框(multiselect)的动态添加列表项的方法
javascript getElementsByName()的用法说明
Document 对象的常用方法
JS 事件冒泡 示例代码
JS 面向对象的5钟写法
JS 输入字数判断实现代码
Javascript 汉字字节判断
JavaScript 关键字屏蔽实现函数
一句话JavaScript表单验证代码
利用javascript实现一些常用软件的下载导航
jQuery 相关控件的事件操作分解
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
JavaScript 异步调用框架 (Part 2 - 用例设计)
JavaScript 异步调用框架 (Part 3 - 代码实现)
JavaScript 异步调用框架 (Part 4 - 链式调用)
JavaScript 异步调用框架 (Part 5 - 链式实现)

用 Javascript 验证表单(form)中的单选(radio)值


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 282 ::
收藏到网摘: n/a

在用 Javascript 验证表单(form)中的单选框(radio)是否选中时,很多新手都会遇到问题,原因是 radio 和普通的文本框在获取值的时候有很大不同. 本文介绍了一个较为通用的获取 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) == '')
{ ...... }

根据判断结果执行你想要的操作。