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扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
vue组件入门知识全梳理
Sep 21 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 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
scrapy爬虫完整实例
2018/01/25 Python
Python内建模块struct实例详解
2018/02/02 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
电大自我鉴定范文
2013/10/01 职场文书
高中自我鉴定范文
2013/11/03 职场文书
师范生个人推荐信
2013/11/29 职场文书
银行实习生的自我评价
2014/01/13 职场文书
班组安全员工作职责
2014/02/01 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
岗位说明书范文
2014/05/07 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
离婚代理词范文
2015/05/23 职场文书
Flask response响应的具体使用
2021/07/15 Python