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 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
js实现上传图片及时预览
May 07 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
JS实现选项卡效果的代码实例
May 20 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之PHP语法学习笔记1
2006/12/17 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
js实现弹窗效果
2020/08/09 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python语言描述最大连续子序列和
2017/12/05 Python
设置python3为默认python的方法
2018/10/31 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
建筑结构施工专业推荐信
2014/02/21 职场文书
奥林匹克的口号
2014/06/13 职场文书
班组拓展活动方案
2014/08/14 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
中标通知书
2015/04/17 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
react中的DOM操作实现
2021/06/30 Javascript
Python装饰器的练习题
2021/11/23 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫