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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
WEB前端性能优化的7大手段详解
Feb 04 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
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
使用async-validator编写Form组件的方法
2018/01/10 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
教师批评与自我批评材料
2014/10/16 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
地道战观后感2000字
2015/06/04 职场文书
工作态度怎么写
2015/06/25 职场文书
演讲比赛主持词
2015/06/29 职场文书
Python开发五子棋小游戏
2022/05/02 Python
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技