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 Eval 函数使用
Mar 23 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
Vue.js组件props数据验证实现详解
Oct 19 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
如何在vue 中引入使用jquery
2020/11/10 jQuery
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
django实现后台显示媒体文件
2020/04/07 Python
python中shell执行知识点
2020/05/06 Python
python脚本第一行如何写
2020/08/30 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
DIY手工制作经营店创业计划书
2014/02/01 职场文书
小区推广策划方案
2014/06/06 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery