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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
高中军训广播稿
2014/01/14 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
征兵宣传标语
2014/06/20 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
公司财务部岗位职责
2015/04/14 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
检讨书格式
2019/04/25 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript