§ ITPOW >> 文档 >> JavaScript >> DOM & DHTML

JS 中如何正确读取 Radio 的值

作者：chilleen 来源：ITPOW（原创）日期：2006-8-1

Radio 是 HTML 中的单选框，同一个 form 中，name 相同的 Radio 构成一组，这一组中最多只允许有一个 Radio 被选中。

如果将 form 提交到服务器端 ASP 程序，ASP 程序要获得用户选择的那个 Radio 的 value 是非常方便的，用 request.Form("RadioName")，不必理会有几个 Radio。

但在 JS(JavaScript) 中就要复杂多了，我们不能像对其它元素（如：文本框）一样，使用 formid.objName.value 来取值，我们应该循环这个组的 Radio，判断其 checked 属性，再取值。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>读取 Radio 的值</title>
</head>

<body>

<div>
<a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a>
<hr>
</div>

<form id="form1" action="" method="">
    <div><input type="radio" name="r" id="r1" value="一"><label for="r1">选项一</label></div>
    <div><input type="radio" name="r" id="r2" value="二"><label for="r2">选项二</label></div>
    <div><input type="radio" name="r" id="r3" value="三"><label for="r3">选项三</label></div>
    <div><input type="button" value="检查选择项" onclick="javascript:Foo();"></div>
</form>

<script type="text/javascript" language="javascript">
<!--
function Foo()
{
    var selectedIndex = -1;
    var form1 = document.getElementById("form1");
    var i = 0;
    
    for (i=0; i<form1.r.length; i++)
    {
        if (form1.r[i].checked)
        {
            selectedIndex = i;
            alert("您选择项的 value 是：" + form1.r[i].value);
            break;
        }
    }
    
    if (selectedIndex < 0)
    {
        alert("您没有选择任何项");
    }
}
-->
</script>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

请继续阅读续集

网友评论

谢谢，正是我需要的．（218.104.*.* 2007-11-10 16:49:48）
太谢谢,我在这里耽误了一天多时间.总算进步了（59.61.*.* 2008-02-03 22:26:09）

电邮：cftea@126.com