通过JS的事件处理取得radio的值

最新推荐文章于 2023-12-22 09:58:44 发布

Shawn.Hu

最新推荐文章于 2023-12-22 09:58:44 发布

阅读量1.5w

点赞数

分类专栏： javascript

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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 = radio[i].value;
     alert(radioValue);
    }
   }
  }

  </script>
</head>

<body>
  <input type ="radio" id = "form1" name = "form1" value = "1" onchange ="change();">选择1
  <input type ="radio" id = "form1" name = "form1" value = "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 = "1" onchange ="change();">选择1
  <input type ="radio" id = "form1" name = "form1" value = "2" onchange ="change();">选择2
</body>
</html>

Shawn.Hu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
通过JS的事件处理取得radio的值

http://blog.sina.com.cn/s/blog_50a1e17401017pik.html提前知识准备：在一个HTML文档中，每个元素都可以设置ID和NAME属性。其中ID属性是唯一属性，不可以重复，一个ID值只能对应一个元素；而NAME属性是可以重复的，一个NAME值可以对应一组元素。所以，使用document.getElementByIdx_x(I
复制链接

扫一扫