JavaScript中获取Radio被选中的值


Posted in Javascript onNovember 11, 2015

原理就是:一般使用遍历的方法,判断每个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("您没有选择任何项");
  }
}
Javascript 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
angular6的响应式表单的实现
Oct 10 Javascript
javascript图片滑动效果实现
Jan 28 #Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 #Javascript
九种原生js动画效果
Nov 11 #Javascript
js文字横向滚动特效
Nov 11 #Javascript
详解javascript遍历方式
Nov 11 #Javascript
js window对象属性和方法相关资料整理
Nov 11 #Javascript
js clearInterval()方法的定义和用法
Nov 11 #Javascript
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
php正则表达式(regar expression)
2011/09/10 PHP
如何实现JS函数的重载
2006/09/22 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
keras 多任务多loss实例
2020/06/22 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python实现经典排序算法的示例代码
2021/02/07 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
有多年工作经验的自我评价
2014/03/02 职场文书
2014年国培研修感言
2014/03/09 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
小学生家长意见
2015/06/03 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技