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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 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实现的zip文件内容比较类
2014/09/24 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
python遍历数组的方法小结
2015/04/30 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python+opencv识别图片中的圆形
2020/03/25 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Redis 限流器
2022/05/15 Redis