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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
手写一个python迭代器过程详解
2019/08/27 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
出国英文推荐信
2014/05/10 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
高三励志标语
2014/06/05 职场文书
专科生就业求职信
2014/06/22 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers