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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python读取Excel的方法实例分析
2015/07/11 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python模拟事件触发机制详解
2018/01/19 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
会计应聘求职信范文
2013/12/17 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
小学教师工作总结2015
2015/04/07 职场文书
学前教育见习总结
2015/06/23 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python