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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JS Attribute属性操作详解
May 19 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
jQuery的事件预绑定
Dec 05 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
vue中的使用token的方法示例
Mar 10 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
jquery radio 操作代码
2011/03/16 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
python实现在windows下操作word的方法
2015/04/28 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python多进程同步简单实现代码
2016/04/27 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python版大富翁源代码分享
2018/11/19 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
看古人们是如何赞美老师的?
2019/07/08 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript