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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python字典的常用操作方法小结
2016/05/16 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
django的ORM操作 增加和查询
2019/07/26 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Django日志及中间件模块应用案例
2020/09/10 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
三年大学生活自我鉴定
2014/01/21 职场文书
会议邀请书范文
2014/02/02 职场文书
优秀食品类广告词
2014/03/19 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
如何写早恋检讨书
2014/09/10 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
《打电话》教学反思
2016/02/22 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers