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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
有关Promises异步问题详解
Nov 13 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
Vue 请求传公共参数的操作
Jul 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
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
vue组件间通信解析
2017/03/01 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python 装饰器使用详解
2017/07/29 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
出生公证委托书
2014/04/03 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
作风建设年度心得体会
2014/10/29 职场文书
财务检查整改报告
2014/11/06 职场文书
2014年司机工作总结
2014/11/21 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
在Django中使用MQTT的方法
2021/05/10 Python