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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
html实现随机点名器的示例代码
Apr 02 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
短波收音机简介
2021/03/01 无线电
PHP下对字符串的递增运算代码
2010/08/21 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Python 递归函数详解及实例
2016/12/27 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
成绩单家长评语大全
2014/04/16 职场文书
营销团队口号
2014/06/06 职场文书
工会工作先进事迹
2014/08/18 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
岁月神偷观后感
2015/06/11 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
小学学习委员竞选稿
2015/11/20 职场文书