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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 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
php判断ip黑名单程序代码实例
2014/02/24 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python安装本地whl的实例步骤
2019/10/12 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
女娲补天教学反思
2014/02/05 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
JavaScript原型链详解
2021/11/07 Javascript