脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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();"/>
您可能感兴趣的文章:

相关文章

  • 浅谈js数组splice删除某个元素爬坑

    浅谈js数组splice删除某个元素爬坑

    这篇文章主要介绍了浅谈js数组splice删除某个元素爬坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • js+xml生成级联下拉框代码

    js+xml生成级联下拉框代码

    js+xml生成级联下拉框代码，需要的朋友可以参考下
    2012-07-07
  • 如何利用unicloud生成微信小程序分享码

    如何利用unicloud生成微信小程序分享码

    这篇文章主要给大家介绍了关于如何利用unicloud生成微信小程序分享码的相关资料,这是最近工作中遇到的一个需求,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • HTML+JS实现3D倒计时爆炸特效

    HTML+JS实现3D倒计时爆炸特效

    这篇文章主要为大家详细介绍了如何结合HTML与JS实现3D倒计时爆炸特效,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2024-01-01
  • ES6使用export和import实现模块化的方法

    ES6使用export和import实现模块化的方法

    这篇文章主要介绍了ES6使用export和import实现模块化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 验证手机号码的JS方法分享

    验证手机号码的JS方法分享

    这篇文章介绍了验证手机号码的JS方法，有需要的朋友可以参考一下
    2013-09-09
  • 总结JavaScript的正则与其他语言的不同之处

    总结JavaScript的正则与其他语言的不同之处

    我接触过不少语言,我很看重一门语言的正则表达式是否强大,还有正则与语法的结合是否紧密.在这一点上,JavaScript做的还不错,至少有正则字面量.当然,最强大的还是Perl.但最近发现JavaScript中的正则有几个不同于其他语言的地方，下面一起来看下。
    2016-08-08
  • H5如何实现唤起APP及调试bug解决

    H5如何实现唤起APP及调试bug解决

    这篇文章主要为大家介绍了H5如何实现唤起APP及调试bug解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • axios概念介绍和基本使用

    axios概念介绍和基本使用

    axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了关于axios概念介绍和基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • JavaScript编制留言簿程序代码

    JavaScript编制留言簿程序代码

    也许你有一个很酷的主页，很希望与人分享。同时，你希望访问你主页的人能对你的主页提供一些意见和建议，或者你对某个主题感兴趣，而希望客人也许能给你一帮助，这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。
    2008-09-09

最新评论