`

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中获取jsp表单中radio类型的值简单实例

    本文将通过一个简单实例,讲解如何在JavaScript中获取JSP表单中单选按钮(radio)类型的值。 首先,我们需要了解单选按钮(radio)在HTML表单中的基本用法。单选按钮允许用户在一组选项中选择一个值,它通常使用`...

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

    在本文中,我们将深入探讨如何使用JavaScript(JS)遍历元素并动态地为它们添加CSS类,以及在用户点击其他元素时如何删除已添加的CSS类。此外,我们还将研究如何实现点击显示和关闭层的功能,包括在空白区域点击时...

    Javascript 遍历页面text控件详解

    Javascript遍历页面中的text控件是前端开发中常见的操作,特别是在需要对页面中多个文本输入框进行统一处理时显得尤为重要。本文将详细介绍如何使用Javascript遍历页面上所有的text类型的控件,并提取这些控件的ID。...

    jsp中radio控件的使用

    本项目展示了如何在JSP页面中使用`radio`控件,结合JavaScript进行用户交互处理,如判断是否选中以及获取选中的`radio`控件的值。 首先,我们来理解`radio`控件的基本结构。在HTML中,`&lt;input&gt;`标签用于创建`radio`...

    用图片代替Radio选择value值.rar

    // 遍历Radio按钮 for (var i = 0; i &lt; radioButtons.length; i++) { // 添加点击事件监听器 radioButtons[i].addEventListener('click', function() { // 移除所有已选中的样式 for (var j = 0; j &lt; radio...

    javascript radio值获取代码

    // 遍历Radio按钮 for (var i = 0; i ; i++) { // 检查当前Radio是否被选中 if (radios[i].checked) { // 如果被选中,获取其value属性 var selectedValue = radios[i].value; console.log('选中的值为:', ...

    JS获取选中的radio button的值

    本篇文章将详细讲解如何使用JavaScript来获取选中的Radio button的值以及相关的知识点。 首先,Radio按钮在HTML中的基本结构如下: ```html &lt;input type="radio" id="option1" name="options" value="1"&gt; ...

    element-ui循环显示radio控件信息的方法

    在前端开发中,Element-UI 是一个流行的基于 Vue.js 的组件库,它提供了一套丰富的界面组件以方便开发者构建页面。在很多应用场景中,我们可能会需要动态生成一组单选框(radio)控件,并且为每个单选框提供不同的...

    判断radio是否被选中

    本文档涉及了如何在ASP(Active Server Pages)中利用JavaScript来实现对表单中`&lt;input type="radio"&gt;`控件的选择状态进行检测的功能。通过这种方式,可以在用户提交表单前即时反馈哪些选项已被选择。 **知识点细节...

    JQuery操作checkbox、radio等示例

    5. **遍历所有元素**:如果需要对一组checkbox或radio进行操作,可以使用`.each()`方法。`$("[type=checkbox]").each(function() { ... })`会遍历所有的checkbox,并对每个元素执行提供的函数。 6. **获取选中的值*...

    jQuery 操作input中radio的技巧

    5. 遍历radio并进行操作:在函数onclick1和onclick2中,使用了for循环来遍历所有具有相同name属性的radio元素。遍历的目的是找到第一个被选中的radio元素,并取消其选中状态。这种遍历方式可以应用于各种需要检查...

    vue.js循环radio的实例

    Vue.js 是一款流行的前端JavaScript框架,它提供了丰富的功能来构建用户界面。在Vue.js中,循环渲染元素是非常常见的操作,特别是在处理列表数据时。在这个场景中,我们需要在页面上显示一组可选的单选按钮(radio)...

    用 Javascript 验证表单(form)中的单选(radio)值

    在使用JavaScript进行前端开发的过程中,表单验证是不可或缺的一个环节。表单中的单选按钮(radio)是一种常见且特殊的数据输入方式,允许用户在预设的多个选项中选择一个。由于其特殊的使用方式,验证单选按钮是否...

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

    在JavaScript中,获取单选按钮(radio)选中后的值是一项常见的任务,特别是在表单提交时。单选按钮通常用于提供一组互斥的选择,用户只能选择其中的一个。在本文中,我们将探讨如何在用户选择或未选择单选按钮时...

    js checkbox radio

    在JavaScript中,`checkbox`和`radio`是两种常见的表单元素,用于用户输入选择数据。它们在网页交互中扮演着重要角色。本篇将详细探讨这两种元素的使用方法、特性以及如何通过JavaScript进行操作。 一、Checkbox...

    js实现动态改变radio状态的方法

    在本文中,我们将探讨如何使用JavaScript(JS)动态改变HTML中的单选按钮(radio)状态。单选按钮在网页交互中经常用于让用户在多个选项中选择一个。在某些情况下,可能需要自定义其行为,例如改变选中状态或者样式...

    js获取 type=radio 值的方法

    在JavaScript中,获取`type=radio`的值通常涉及到处理HTML中的单选按钮(Radio Buttons)。这些按钮在网页表单中用于提供多个选择项,用户只能选择其中之一。`type=radio`是HTML5中定义的一个属性,用于创建单选按钮...

    js 获取radio按钮值的实例

    本实例将演示如何使用JavaScript来获取表单中的单选按钮组(radio button group)中用户选中的值。 首先,我们来看HTML部分。在这个例子中,我们有一个表单(form),其包含一组名称相同的单选按钮。每个单选按钮都...

Global site tag (gtag.js) - Google Analytics