码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-10-30 10:16:01      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:blog   http   io   ar   使用   java   for   sp   div   

转自: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
   var radioLength = radio.length;
   for(var i = 0;i < radioLength;i++)
   {
    if(radio[i].checked)
    {
     var radioValue = 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()
  {
   var New=document.getElementsByName("form1");
   var strNew;
   for(var i=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>

 

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

标签:blog   http   io   ar   使用   java   for   sp   div   

原文地址:http://www.cnblogs.com/shz365/p/4061886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!