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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
使用jquery如何获取时间
Oct 13 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
vue 实现tab切换保持数据状态
Jul 21 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 命令行参数详解及应用
2011/05/18 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
Python代码的打包与发布详解
2014/07/30 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
2022微信温控新功能上线
2022/05/09 数码科技