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的文字自动截取(提供源代码)
Aug 09 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
小程序获取周围IBeacon设备的方法
Oct 31 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制作的中文拼音首字母工具类
2014/12/11 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
JavaScript While 循环基础教程
2007/04/05 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
sails框架的学习指南
2014/12/22 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
一些Solaris面试题
2013/03/22 面试题
关于迟到的检讨书
2014/01/26 职场文书
初中语文教学反思
2014/02/02 职场文书
抄作业检讨书
2014/02/17 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
天河观后感
2015/06/11 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
《观潮》教学反思
2016/02/17 职场文书
创业计划书之网吧
2019/10/10 职场文书
python实现三次密码验证的示例
2021/04/29 Python