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

js如何获取选中radio单选按钮的值

时间:2016-01-14 06:11:49      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:

js如何获取选中radio单选按钮的值:
radio单选按钮在是非常常用的表单元素之一,经常需要获取被选中按钮的value属性值,下面就通过实例简单介绍一下如何使用javascript实现此功能,代码实例如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function()
{
  var obox=document.getElementById("box");
  radios=obox.getElementsByTagName("input");
  var bt=document.getElementById("bt");
  bt.onclick=function()
  {
    for(var i=0;i<radios.length;i++)
    {
      if(radios[i].checked==true)
      {
         alert(radios[i].value);
      }
    }
  }
}
</script>
</head>
<body>
<div id="box">
  <input type="radio" name="ra" value="1"/>
  <input type="radio" name="ra" value="2"/>
  <input type="radio" name="ra" value="3"/>
  <input type="radio" name="ra" value="4"/>
  <input type="radio" name="ra" value="5"/>
</div>
<input type="button" id="bt" value="点击查看结果" />
</body>
</html>

 

以上代码当点击按钮的时候可以弹出选中的单选按钮的value属性值,代码非常的简单下面简单介绍一下实现过程。
一.实现原理:
通过getElementsByTagName()函数获取div下的input元素对象,在本代码中也就是单选按钮,然后用for循环遍历每一个按钮,并且判断当前单选按钮的checked属性值是否为true,如果为tue就是选中,然后弹出value属性值,大体如此。
二.相关阅读:
1.window.onload可以参阅window.onload用法详解一章节。
2.getElementById()函数可以参阅javascript的document.getElementById()方法一章节。 
3.getElementsByTagName()函数可以参阅javascript的document.getElementsByTagName()一章节。 
4.onclick事件可以参阅javascript的onclick事件一章节。 
5.checked属性可以参阅javascript的radio.checked属性 一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9693

更多内容可以参阅:http://www.softwhy.com/javascript/

 

js如何获取选中radio单选按钮的值

标签:

原文地址:http://www.cnblogs.com/zhadanren/p/5128992.html

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