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 23 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python urlopen 使用小示例
2008/09/06 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
迟到检讨书范文
2015/01/27 职场文书
北京天坛导游词
2015/02/12 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
python垃圾回收机制原理分析
2022/04/13 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL