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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
原生JS轮播图插件
Feb 09 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
解析原生JS getComputedStyle
May 25 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php中session退出登陆问题
2014/02/27 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
微信小程序签到功能
2018/10/31 Javascript
Python AES加密模块用法分析
2017/05/22 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python中偏函数用法示例
2018/06/07 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
关于python中的xpath解析定位
2020/03/06 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python截图并保存的具体实例
2021/01/14 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
办公室文员工作职责
2014/01/31 职场文书
销售人员自我评价
2014/02/01 职场文书
一般党员对照检查材料
2014/09/24 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
美容院合作经营协议书
2014/10/10 职场文书
岳庙导游词
2015/02/04 职场文书
三潭印月的导游词
2015/02/12 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers