JavaScript中获取Radio被选中的值

原理就是：一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值.

<form id="userlist" method="post" action="option.php">
<input type="radio" name="userid" value="1">1
<input type="radio" name="userid" value="2">2
<input type="radio" name="userid" value="3">3
</form>
<script language="javascript">
function usubmit(action){
var radionum = document.getElementById("userlist").userid;
for(var i=0;i<radionum.length;i++){
if(radionum[i].checked){
userid = radionum[i].value
}
}
window.location.href='option.php?action='+action+'&userid='+userid;
}
</script>

上面的需要注意form中设置了id（userlist）

这里有两个要注意的地方：一个是如何取值，一个是如何遍历
document.getElementById("userlist").userid;
这是根据form的id再取其中控件元素的name取值的方法。
也可以用document.getElementsByName("userid")直接获得

getElementById与getElementsByName的区别，getElementById取radio类型元素只能选取单个控件，getElementsByName取radio类型元素的时候是取出的整个radio数组,如果一定要用getElementById，则可像上面代码一样先用getElementById取得整个表单的id.后面紧跟radio名称即可

现在知道document.getElementsByName("userid")就是得到一个数组，该数组中的元素是该dom树中所有name为radionum的元素，即使只有一个radio，也是一个只包含一个元素的数组．
而document.all.userid则不同，它是得到页面中的userid元素的引用，当页面中存在多个radio时，它返回的是一个数组，如果页面中只包含一个radio，则得到的就是这个radio对象的引用．由于这时得到的不是一个数组，因此就不能遍历数组来进行判断了．

做成函数,如下:

function  getRadioBoxValue(radioName)
{
      var obj = document.getElementsByName(radioName); //这个是以标签的name来取控件
         for(i=0; i<obj.length;i++)  {

         if(obj[i].checked)  {
             return  obj[i].value;
         }
       }
       return "undefined";
}

JS获取radio里选中的值 

function Foo()
{
  var selectedIndex = -1;
  var form1 = document.getElementById("form1");
  var i = 0;

  for (i=0; i<form1.r.length; i++)
  {
    if (form1.r[i].checked)
    {
      selectedIndex = i;
      alert("您选择项的 value 是：" + form1.r[i].value);
      break;
    }
  }

  if (selectedIndex < 0)
  {
    alert("您没有选择任何项");
  }
}
赞 (0)

相关推荐

  • js实现表单Radio切换效果的方法

    js实现表单Radio切换效果的方法

    本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:

  • 用js的for循环获取radio选中的值

    例如: 复制代码 代码如下: <li><input type="radio" name="zt" value="1"></li> <li><input type="radio" checked="checked" name="zt" value="2"></li> <li><in

  • JS实现点击Radio动态更新table数据

    tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name

  • js表单元素checked、radio被选中的几种方法(详解)

    0.环境 <input type="checkbox"  value="lol"/>lol var lol = document.getElementsByTagName("input")[0]; 1.HTML DOM a.lol.checked = true; 属性的值可以不是lol,只要转为布尔值的时候为true就可以,取值时只有true.false两种 不会增加checked标记 b.lol.click(); 不会增加check

  • js获取 type=radio 值的方法

    复制代码 代码如下: <ul> <li> <input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 --如需整晚保留,请预付房费. </li> <li> <input type="radio" name="radio" value="担保支付

  • js实现的简单radio背景颜色选择器代码

    js实现的简单radio背景颜色选择器代码

    本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • JS 如何获取radio选中后的值及不选择取radio的值

    以下是网上摘下的文章(未测试但很规范可以模仿) 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>text</title> <script> var chk = 0; window.onload=function (){ var chkObjs

  • js中获取jsp表单中radio类型的值简单实例

    1.问题的引出: 我们经常需要在js中使用ajax向后台发送请求,在这之前我们需要搜集所需的Form表单参数, 我常常会如此解决,简单省事: // editBasicDataObjectForm 为 form的id,data的形式为 name1=val1&name2=val2&name3=val3&..... var data = $("#editBasicDataObjectForm").serialize(); 但在一次我需要单独获得表单中radio类型的字

  • JavaScript中获取Radio被选中的值

    原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. <form id="userlist" method="post" action="option.php"> <input type="radio" name="userid" value="1">1 <input type="radio" name=&quo

  • javascript获取select标签选中的值

    复制代码 代码如下: var obj = document.getElementById("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式 复制代码 代码如下: $('#testSelect

  • layui从数据库中获取复选框的值并默认选中方法

    如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel=

  • 在JavaScript中获取请求的URL参数

    当然我们可以在后台中获取参数的值,然后在前台js代码中获取变量的值,具体做法请参考我的这篇文章:JavaScript获取后台C#变量以及调用后台方法. 其实我们也可以直接在js中获取请求的参数的值,通过使用window.location.search可以获取到当前URL的?号开始的字符串,如前面的链接获取到的search为?id=001.再对获取的字符串进行处理,就可以获取到参数的值了. 复制代码 代码如下: function getUrlParam(name) { var reg = new

  • 在JavaScript中获取请求的URL参数[正则]

    第一种方法:,代码比较专业 推荐 复制代码 代码如下: <script> function GetLocationParam(param){ var request = { QueryString : function(val) { var uri = window.location.search; var re = new RegExp("" +val+ "=([^&?]*)", "ig"); return ((uri.ma

  • Javascript中获取对象的原型对象的方法小结

    在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象. 复制代码 代码如下: <!-- lang: js --> function F(){}; var foo = new F(); alert(foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持. 那么在不支持__pro

  • javascript中获取class的简单实现

    js中没有获取class的办法,找了一些封装好的方法,这里整理一下 (1)先进行封装 //封装getClass function getClass(tagName,className) //获得标签名为tagName,类名className的元素 { if(document.getElementsByClassName) //支持这个函数 { return document.getElementsByClassName(className); } else { var tags=document

  • javascript中获取元素标签中间的内容的实现方法

    使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

  • javascript中使用未定义变量或值的情况分析

    本文实例讲述了javascript中使用未定义变量或值的情况.分享给大家供大家参考,具体如下: javascript里面一般不能使用未定义的值,但是下面几种情况除外: 1. 赋值语句中: a=9; alert(a) //9 赋值语句中需要赋值的变量没定义会先定义,再赋值.另外从 a=b=c=8 不报错可以看出赋值语句是从右向左执行的. 2. for in语句中: for(key in {name:'goofy'}){ alert(key) //"name" } alert(key) /

  • 浅谈在页面中获取到ModelAndView绑定的值方法

    springMVC中通过ModelAndView进行后台与页面的数据交互,那么如何在页面中获取ModelAndView绑定的值呢? 1.在JSP中通过EL表达式进行获取(比较常用) 后台: ModelAndView model = new ModelAndView(); model.addObject("name","Jims"); JSP:在JSP中直接使用${name }进行获取 姓名:${name } 2.通过JSP内置对象进行获取 后台: ModelAndV

随机推荐