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

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/

时间: 2024-10-05 04:45:35

js如何获取选中radio单选按钮的值的相关文章

Jquery获取选中的checkbox的值

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <title>checkbox</title>

jquery获取选中的文本和值

jquery获取选中的文本和值 1.说明 (1)获取select下拉框选中的索引       $("#selection").get(0).selectedIndex; (2)获取select下拉框选中的值      $("#selection option:selected").val(); (3)获取select下拉框选中的文本     $("#selection option:selected").text(); 2.实现源码 <!D

js如何获取给定属性的属性值

js如何获取给定属性的属性值:在一些实际应用中需要取得给定属性的属性值,下面就简单介绍一下如何实现次效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</ti

dView实现checkbox全选反选(自带的ShowSelectCheckBOx)并获取选中checkbox对应的值集合

第一步,显示checkbox按钮: 点击AspxGridView的columns,你可以直接选择增加一行Command Column或者随便选择一种然后点击Change To Commadn Column;默认的ShowSelectCheckBOx是true,我们可以不用管,这样你就看到每行都有checkBox按钮了. 第二步,表头部显示CheckBox,点击实现全选|反选功能: 我们切换回源代码,找到AspxGridView的GridViewCommandColumn列,在该列中增加 <Hea

ASPxGridView实现checkbox全选反选(自带的ShowSelectCheckBOx)并获取选中checkbox对应的值集合

第一步,显示checkbox按钮: 点击AspxGridView的columns,你可以直接选择增加一行Command Column或者随便选择一种然后点击Change To Commadn Column;默认的ShowSelectCheckBOx是true,我们可以不用管,这样你就看到每行都有checkBox按钮了. 第二步,表头部显示CheckBox,点击实现全选|反选功能: 我们切换回源代码,找到AspxGridView的GridViewCommandColumn列,在该列中增加 <Hea

js checkbox获取选中的值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*设置css样式*/ div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;} div.box span{color

在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,

前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发现比较大小的判断就出了问题: 代码粘出来: 1 // js弱类型导致的诡异现象,11 > 9 false 2 function downtest(id){// 现象是当val取到的元素val值是11的时候,11>9结果是false 3 // 当前点击下一题的是第几题, 4 var val=$(&q

Js中获取对象的所有key值

假如现在有一个对象 var obj = { A:2 ,B:"Ray" ,C:true ,D:function(){} } 如果想遍历对象obj中的所有键值,一般是用以下方式 for(var key in obj){ console.log(key,obj[key]) } 输出: A 2 B Ray C true D function (){} 如果只是想获取所有的key值,用上面的方法也行得通. 但有更简单的方式:Object.keys(...),返回值是包含key的数组 如 cons

关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)

三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度