JS 中怎么正确读取 Radio 的值
日期：2014-05-16 浏览次数：20330 次
JS 中如何正确读取 Radio 的值
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.cftea.com/" target="_blank">千一网络 www.cftea.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>
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.cftea.com/" target="_blank">千一网络 www.cftea.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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
