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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 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 error_log 函数的使用
2009/04/13 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
根据tensor的名字获取变量的值方式
2020/01/04 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
结构工程个人自荐信范文
2013/11/30 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
学生保证书范文
2014/04/28 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2014年法院工作总结
2014/11/24 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书