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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
ASP知识讲座四
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php数组查找函数总结
2014/11/18 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python购物车程序简单代码
2018/04/18 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python 必须了解的5种高级特征
2020/09/10 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
将相和教学反思
2014/02/04 职场文书
学习演讲稿范文
2014/05/10 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
工作目标责任书
2014/07/23 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle