转自: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. MyEclipse找不到install new software

    Window->Preferences->Capabilities-> classic update(勾选即可) 勾选后会出现software updates,下面按照help-&g ...

  2. 【洛谷3224/BZOJ2733】[HNOI2012]永无乡 (Splay启发式合并)

    题目: 洛谷3224 分析: 这题一看\(n\leq100000\)的范围就知道可以暴力地用\(O(nlogn)\)数据结构乱搞啊-- 每个联通块建一棵Splay树,查询就是Splay查询第k大的模板 ...

  3. S2深入.NET编程总结

    不知从几何时,我也开始变得懒了,以往为了学习的那股子斗劲也早已不在,是时候反思反思了.失败的检测成绩希望可以把我唤醒. 经过总结,在本书中大概学到了这些知识: 1.如果一个类可序列化,则它的子类和包含 ...

  4. Android 使用MySQL直接访问数据库

    在实际项目中,一般很少直接访问MySQL数据库,一般情况下会通过http请求将数据传送到服务端,然后在服务端连接mysql数据库. 在android 中,会通过使用Jdbc 连接MySQL 服务器 p ...

  5. Windows系统文件名的最大长度

    1.文件名的最大长度 Windows 通常限定文件名最多包含 260 个字符.但实际的文件名必须少于这一数值,因为完整路径(如 C:\Program Files\filename.txt)都包含在此字 ...

  6. iframe监听unload事件

    阻止默认事件 event.preventDefault(); 阻止事件冒泡 event.stopPropagation(); event.cancelBubble = true; //IE <a ...

  7. java web项目和java项目的区别(看清IDE本质)

    想必大家在使用MyEclipse时对这两个概念不去深究.只知道是Java EE类的基本都是Web项目,而Java应用程序就是Java项目.而且很多人都愿意使用MyEclipse作为开发工具,且不说大家 ...

  8. Mac OS 小知识

         删除Mac OS输入法中自动记忆的用户词组 有时候不小心制造了一个错误的词组,结果也被输入法牢牢记住,这时候可以用shift+delete组合键来删除      快捷键拾遗 Fn+Delet ...

  9. 微信小程序获取二维码并把logo替换为自己的头像

    $avatarUrl = 'http://cms-bucket.nosdn.127.net/2018/05/28/a1a44ffdc2d24f928c1860d4fbf54703.jpeg?image ...

  10. CDR如何使用钢笔工具进行完美抠图?【6·18特惠倒计时!】

    不要以为抠图只能在图像处理软件中实现,矢量图形绘制软件CorelDRAW一样可以,而且方法很多,文章介绍使用CDR钢笔工具抠图的方法. 提示说明: 首先说明一下,CDR中的钢笔工具和其他平面设计软件中 ...