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获取客户端外网ip的简单实例
Nov 21 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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
php session和cookie使用说明
2010/04/07 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php实现paypal 授权登录
2015/05/28 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python列表使用实现名字管理系统
2019/01/30 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
安全生产活动月方案
2014/03/09 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2015年电工工作总结
2015/04/10 职场文书
亮剑观后感500字
2015/06/05 职场文书
社团招新宣传语
2015/07/13 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
使用Redis实现分布式锁的方法
2022/06/16 Redis