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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
js 替换
2008/02/19 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
pandas的qcut()方法详解
2019/07/06 Python
基于python中__add__函数的用法
2019/11/25 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python运算符+与+=的方法实例
2021/02/18 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
售后客服个人自我评价
2014/09/14 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2014年党建工作总结
2014/11/11 职场文书
初中家长意见
2015/06/03 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python