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 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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
Snoopy类使用小例子
2008/04/15 PHP
php获取地址栏信息的代码
2008/10/08 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python交互模式基础知识点学习
2020/06/18 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
奥巴马开学演讲稿
2014/05/15 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
公司人事任命通知
2015/04/20 职场文书
高中团支书竞选稿
2015/11/21 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript