JS 如何获取radio选中后的值及不选择取radio的值


Posted in Javascript onOctober 28, 2013

以下是网上摘下的文章(未测试但很规范可以模仿)

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>text</title> 
<script> 
var chk = 0; 
window.onload=function (){ 
var chkObjs = document.getElementsByName("radio"); 
for(var i=0;i<chkObjs.length;i++){ 
if(chkObjs[i].checked){ 
chk = i; 
break; 
} 
} 
} 
function check_radio(){ 
var chkObjs = document.getElementsByName("radio"); 
for(var i=0;i<chkObjs.length;i++){ 
if(chkObjs[i].checked){ 
if(chk == i){ 
alert("radio值没有改变不能提交"); 
break; 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<form action='' method='post' onsubmit='javascript:return check_radio()'> 
<input type='radio' value='1' name='radio' checked='checked'>一; 
<input type='radio' value='2' name='radio'>二; 
<input type='radio' value='3' name='radio'>三; 
<input type='radio' value='4' name='radio'>四; 
<input type='radio' value='5' name='radio'>五; <input type=submit value=sub > 
</form> 
</body> 
</html>

下面是不做选择获取radio的值
<input type="radio" name="money" value="1" />美元 
<input type="radio" name="money" value="2" />日元 
<input type="radio" name="money" value="3" />欧元

原生JS方式:(原生DOM操作会把文本也当做一个节点,所以会有nextSibling)
var 美元 = document.getElementsByName("money")[0].nextSibling.nodeValue; 
var 日元 = document.getElementsByName("money")[1].nextSibling.nodeValue; 
var 欧元 = document.getElementsByName("money")[2].nextSibling.nodeValue;

jQuery方式
$('input[name="money"]:checked').next('span').html(); <input type="radio" name="money" value="1" checked="checked" /><span>美元</span> 
<input type="radio" name="money" value="2" /><span>日元</span> 
<input type="radio" name="money" value="3" /><span>欧元</span> 
<!--正常的情况下,创建复选框或者单选框会使用label将其链接,比如:--> 
<input id="radio1" type="radio" name="money" value="1" /><label for="radio1">美元</label>

以下要选择的:

这个只判断有没有选择

function radioValue(){ 
var radArr = document.getElementsByName("radiov"); 
var radValue = ""; 
//alert(radArr.length); 
for(var i=0; i<radArr.length; i++){ 
//alert(radArr[i].checked+" "+radArr[i].name + " "+ radArr[i].value); 
if(radArr[i].checked){ 
radValue = radArr[i].value; } 
} 
if(radValue != null && radValue != ""){ 
alert(radValue); 
}else{ 
alert("请选择"); 
} 
}

<input type="button" value="测试radio中获取数据" onclick="radioValue();"/>
Javascript 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 #Javascript
JS截取字符串常用方法详细整理
Oct 28 #Javascript
js自动生成对象的属性示例代码
Oct 28 #Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 #Javascript
javascript:void(0)的作用示例介绍
Oct 28 #Javascript
jsonp原理及使用
Oct 28 #Javascript
JS实现一键回顶功能示例代码
Oct 28 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
学生感冒英文请假条
2014/02/04 职场文书
行政助理的岗位职责
2014/02/18 职场文书
积极向上的团队口号
2014/06/06 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
幼儿学前班评语
2014/12/29 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Java异常处理try catch的基本用法
2021/12/06 Java/Android
用Python生成会跳舞的美女
2022/01/18 Python
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记