转自：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的值的更多相关文章

  1. js获取单选框radio的值

    遇到一个js获取radio值的问题,原来根据frm.type.value取到的值在ie下是空值 解决办法:type为每个radio的值 var chkObjs=document.getElements ...

  2. easyui 》 radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...

  3. zepto.js的事件处理

    能够深入理解zepto对事件的处理,那么整个JS的事件处理就应该差不多合格了,事件处理是JS语言的一个难点. 1. 首先来看$.event函数. JS中有很多事件,都是已经定义好了,我们直接调用就可以 ...

  4. jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...

  5. jsp之radio取值与赋值

    转自:https://blog.csdn.net/dongfengkuayue/article/details/50352937 取radio的值: js代码 $("input[name=' ...

  6. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  7. jQuery radio取值，checkbox取值，select取值

    语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...

  8. jQuery获取循环中的选中单选按钮radio的值

    1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...

  9. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...

随机推荐

  1. php phppowerpoint

    今天早上从订阅的 Zend DevZone 看到篇很有意思的文章. Creating PowerPoint 2007 files using PHP. 试了一下. 果然很又意思, 分享给大家吧. 程序 ...

  2. NOI2015 软件包管理器(树链剖分+线段树)

    P2146 软件包管理器 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决 ...

  3. Akka源码分析-ask模式

    在我之前的博文中,已经介绍过要慎用Actor的ask.这里我们要分析一下ask的源码,看看它究竟是怎么实现的. 开发时,如果要使用ask方法,必须要引入akka.pattern._,这样才能使用ask ...

  4. 6CSS之文本

    CSS文本:文本缩进(text-indent).文本对齐(text-align).文本修饰(text-decoration).文本大小写(text-transform).字符距离(letter-spa ...

  5. C++ 由虚基类 虚继承 虚函数 到 虚函数表

    //虚基类:一个类可以在一个类族中既被用作虚基类,也被用作非虚基类. class Base1{ public: Base1(){cout<<"Construct Base1!&q ...

  6. phpstorm如何配置xdebug?（hpStudy+PhpStorm+XDebug配置）

    xdebug是什么? 初次接触,反复试了几次终于把这个xdebug给搞清楚了,类似于前端的控制台这样的东西,可以根据断点展示我们想要看的数据. 如何配置xdebug? 配置前说明: 1.phpStud ...

  7. JS——拖拽盒子

    注意事项: 1.opacity是全部元素变透明,rgba只是背景色变透明 2.先是注册鼠标按下的事件,此时就需要记录鼠标在盒子中的坐标 3.再在鼠标按下事件中注册鼠标移动事件,此时鼠标的坐标是不断变化 ...

  8. 初识关系型数据库（SQL）与非关系型数据库（NOSQL）

    一.关系型数据库(SQL): Mysql,oracle 特点:数据和数据之间,表和字段之间,表和表之间是存在关系的 例如:部门表 001部分,   员工表 001 用户表,用户名.密码 分类表 和 商 ...

  9. Java 中访问数据库的步骤？Statement 和PreparedStatement 之间的区别？

    Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别? Java 中访问数据库的步骤 1)注册驱动: 2)建立连接: 3)创建Statement: 4)执 ...

  10. Spring学习_day02_AOP,AspectJ,JdbcTemplate

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! Spring_day02 一.AOP面向切面编程 1. ...