首页 > 代码库 > 通过JS的事件处理取得radio的值
通过JS的事件处理取得radio的值
转自：http://blog.sina.com.cn/s/blog_50a1e17401017pik.html
提前知识准备：
在一个HTML文档中，每个元素都可以设置ID和NAME属性。
其中ID属性是唯一属性，不可以重复，一个ID值只能对应一个元素；
而NAME属性是可以重复的，一个NAME值可以对应一组元素。
所以，使用document.getElementByIdx_x(ID)时返回的只有一个被选中的HTML元素；
而使用document.getElementsByName(NAME)时返回的是一个由多个HTML元素组成的数组
（哪怕HTML页面中只有一个符合要求的元素，返回的也是数组）。
document.getElementsByName(NAME)多用于在FORM表单中选取一组checkbox或radio
方法1：
<html>
<head>
<script type ="text/javascript">
function change()
{
var radio =document.getElementsByName("form1");
//var radio =document.getElementByIdx_x("form1");
// 用ById就不能取得全部的radio值,而是每次返回都为1
varradioLength = radio.length;
for(var i =0;i < radioLength;i++)
{
if(radio[i].checked)
{
varradioValue = http://www.mamicode.com/radio[i].value;
alert(radioValue);
}
}
}
</script>
</head>
<body>
<input type ="radio" id = "form1" name = "form1" value = "http://www.mamicode.com/1" onchange ="change();">选择1
<input type ="radio" id = "form1" name = "form1" value = "http://www.mamicode.com/2" onchange ="change();">选择2
</body>
</html>
方法2：
<html>
<head>
<script type ="text/javascript">
function change()
{
varNew=document.getElementsByName("form1");
varstrNew;
for(vari=0;i<New.length;i++)
{
if(New.item(i).checked)
{
strNew=New.item(i).getAttribute("value");
alert(strNew ); // item()方法:返回集合中的当前项
break;
}
else
{
continue;
}
}
}
</script>
</head>
<body>
<input type ="radio" id = "form1" name = "form1" value = "http://www.mamicode.com/1" onchange ="change();">选择1
<input type ="radio" id = "form1" name = "form1" value = "http://www.mamicode.com/2" onchange ="change();">选择2
</body>
</html>
通过JS的事件处理取得radio的值