脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 获取radio选中后的值

JS 如何获取radio选中后的值及不选择取radio的值

 更新时间：2013年10月28日 15:36:45   作者：  
获取radio选中后的值，这在提交页面经常会使用到的，在本文为大家介绍下不选择也能获取radio的值，具体实现如下，感兴趣的朋友可以参考下
以下是网上摘下的文章（未测试但很规范可以模仿）
复制代码 代码如下:

<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();"/>
您可能感兴趣的文章:

相关文章

  • java遇到微信小程序

    java遇到微信小程序 "支付验证签名失败" 问题解决

    这篇文章主要介绍了java遇到微信小程序 "支付验证签名失败" 问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • javascript数组去重方法汇总

    javascript数组去重方法汇总

    数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下。
    2015-04-04
  • JavaScript实现轮播图片完整代码

    JavaScript实现轮播图片完整代码

    这篇文章主要为大家介绍了JavaScript实现轮播图片的完整代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js实现图片点击左右轮播

    js实现图片点击左右轮播

    本文给大家分享的是使用javascript实现的图片左右轮播的代码，已经封装完毕，使用方法非常简单，参考示例，有需要的小伙伴可以参考下。
    2015-07-07
  • JS图像无缝滚动脚本非常好用

    JS图像无缝滚动脚本非常好用

    最好用的JS图像无缝滚动脚本，根据需要改改宽度和图像个数就可以了,需要的朋友可以参考下
    2014-02-02
  • js-FCC算法-No repeats please字符串的全排列(详解)

    js-FCC算法-No repeats please字符串的全排列(详解)

    下面小编就为大家带来一篇js-FCC算法-No repeats please字符串的全排列(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • JavaScript解析json格式数据简单示例

    JavaScript解析json格式数据简单示例

    这篇文章主要介绍了JavaScript解析json格式数据简单示例,本文通过for循环来获取json结点数据,需要的朋友可以参考下
    2014-12-12
  • javascript实现淘宝幻灯片广告展示效果

    javascript实现淘宝幻灯片广告展示效果

    这篇文章主要介绍了javascript实现淘宝幻灯片广告展示效果的方法,以实例形式完整讲述了javascript实现幻灯效果的javascript、css及html实现技巧,需要的朋友可以参考下
    2015-04-04
  • IE8下关于querySelectorAll()的问题

    IE8下关于querySelectorAll()的问题

    在IE8的新特性里，提到了会支持querySelector()和querySelectorAll()方法，如何使用这里就不说了，只是记录下我在使用时遇到一个问题。
    2010-05-05
  • 纯javascript实现图片延时加载方法

    纯javascript实现图片延时加载方法

    看到一篇博客说土豆网的图片是延迟加载的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处是当页面有好几屏内容时，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷。
    2015-08-08

最新评论