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 window.opener返回父页面的应用
Oct 24 Javascript
jQuery参数列表集合
Apr 06 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
javascript中call()、apply()的区别
Mar 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程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
JS event使用方法详解
2008/04/28 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
详解vue中axios的封装
2018/07/18 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python for i in range ()用法详解
2020/09/18 Python
Python 创建守护进程的示例
2020/09/29 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
光声世纪笔试题目
2012/08/25 面试题
工作失职检讨书范文
2014/01/16 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
英文导游词
2015/02/13 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript