`

js遍历radio

    博客分类:
  • JS
JSP 
阅读更多
一般使用遍历的方法,判断每个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>



这里有两个要注意的地方:一个是如何取值,一个是如何遍历
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";       
  }  
分享到:
评论

相关推荐

    JavaScript中获取Radio被选中的值

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

    js遍历添加栏目类添加css 再点击其它删除css【推荐】

    //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).click(function() { var tagid=$(this).attr('tagid'); $("#tagid").val(tagid) $(".ckselect")....

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

    主要介绍了js实现表单Radio切换效果的方法,涉及javascript实现页面元素的隐藏与显示及复选框的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    一组单选按钮radio如何进行控制

    body{font-size:12px;} .code{display:none;} 标题一 详细内容一 标题二 详细内容二 标题三 详细内容三 ... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] ... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    Angularjs单选框相关的示例代码

    1.ng 获取ng-repeat遍历出来的radio的value 1)普通形式(不使用ng-repeat) 可以正常显示 &lt;input type="radio" name="t1" ng-model="demo" value="a"&gt;a &lt;input type="radio" name="t1" ng-model=...

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    flex3的cookbook书籍完整版dpf(包含目录)

    如何去验证多个Combo Box及Radio Button组件 15.6节. 如何在一个表单内通过ToolTips来返映一个错误 15.7节. 如何使用正则表达式去定位电邮地址 15.8节. 如何使用正则表达式去验证信用卡号码 15.9节. 如何使用正则...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...

    ExtAspNet_v2.3.2_dll

    目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...

    Java学习笔记-个人整理的

    \contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...

Global site tag (gtag.js) - Google Analytics