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

Javascript
Javascript解决常见浏览器兼容问题的12种方法
用AJAX返回HTML片段中的JavaScript脚本
javascript splice数组简单操作
jQuery 数据缓存data(name, value)详解及实现
javascript下动态this与动态绑定实例代码
javascript forEach函数实现代码
javascript bind绑定函数代码
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
jQuery DOM操作小结与实例
Extjs学习笔记之一 初识Extjs之MessageBox
Extjs学习笔记之二 初识Extjs之Form
Extjs学习笔记之三 extjs form更多的表单项
Extjs学习笔记之四 工具栏和菜单
EXT中xtype的含义分析
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
jQuery DOM操作 基于命令改变页面
让多个输入框中的内容同时变化的js代码
判断iframe是否加载完成的完美方法
IE iframe的onload方法分析小结
javascript new一个对象的实质

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 498 ::
收藏到网摘: 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) == '')
{ ...... }

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