JS 如何获取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();"/>

赞 (0)

相关推荐

  • js表单元素checked、radio被选中的几种方法(详解)

    0.环境 <input type="checkbox"  value="lol"/>lol var lol = document.getElementsByTagName("input")[0]; 1.HTML DOM a.lol.checked = true; 属性的值可以不是lol,只要转为布尔值的时候为true就可以,取值时只有true.false两种 不会增加checked标记 b.lol.click(); 不会增加check

  • 用js的for循环获取radio选中的值

    例如: 复制代码 代码如下: <li><input type="radio" name="zt" value="1"></li> <li><input type="radio" checked="checked" name="zt" value="2"></li> <li><in

  • js获取 type=radio 值的方法

    复制代码 代码如下: <ul> <li> <input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 --如需整晚保留,请预付房费. </li> <li> <input type="radio" name="radio" value="担保支付

  • JS实现点击Radio动态更新table数据

    tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name

  • js中获取jsp表单中radio类型的值简单实例

    1.问题的引出: 我们经常需要在js中使用ajax向后台发送请求,在这之前我们需要搜集所需的Form表单参数, 我常常会如此解决,简单省事: // editBasicDataObjectForm 为 form的id,data的形式为 name1=val1&name2=val2&name3=val3&..... var data = $("#editBasicDataObjectForm").serialize(); 但在一次我需要单独获得表单中radio类型的字

  • js实现表单Radio切换效果的方法

    js实现表单Radio切换效果的方法

    本文实例讲述了js实现表单Radio切换效果的方法.分享给大家供大家参考.具体如下: 这里基于js实现表单中的Radio单选框切换效果,当选中某个单选框的时候,所属范围会一同变换,我觉得大家应该收藏一下,以前想用的时候苦苦叫不上这种效果的名字,现在找到了,而且实现起来竟然如此简单,有些地方要注意,获取标签名为myradio的标签. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-radio-cha-codes/ 具体代码如下:

  • js实现的简单radio背景颜色选择器代码

    js实现的简单radio背景颜色选择器代码

    本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • JavaScript中获取Radio被选中的值

    原理就是:一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值. <form id="userlist" method="post" action="option.php"> <input type="radio" name="userid" value="1">1 <input type="radio" name=&quo

  • JS 如何获取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

  • js 中获取制定的cook信息实现方法

    前提: 在js中获取cook最蛋疼,因为他没按照cook变量的值一个个的存好,而是所有的变量都存在一起,只能字段一个个取出来,才能获得某个cook的值. 所以写一个function,来获得某个变量的值: function get_cookie(name) { var bikky = document.cookie; name += "="; var i = 0; while (i < bikky.length) { var offset = i + name.length; if

  • jQuery获取radio选中项的值实例

    jQuery获取radio选中项的值实例

    <title></title> <script src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function () { //没有默认选中的情况 //先判断radio是否有选中项,再获取选中的值 $("#btnclick").click(function () { //获取选中项的valu

  • jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法

    如下所示: 喜欢<input type="radio" name="likea" id="" value="3" /> 一般<input type="radio" name="likea" id="" value="2" /> 不喜欢<input type="radio" name="li

  • Jquery获取radio选中值实例总结

    Jquery获取radio选中值实例总结

    Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $("input[name='rd']:checked").val(); 2.设置第一个Radio为选中值: $('input:radio:first').attr('checked', 'checked'); 或者 $('input:radio:first').attr('ch

  • js表单处理中单选、多选、选择框值的获取及表单的序列化

    本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

  • JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

  • jQuery实现select下拉框获取当前选中文本、值、索引

    话不多说,请看代码: //直接保存后缀.htnl用谷歌浏览器打开,亲测有效 <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ //为Select添加事件,当选择其中一项时触发 $("select:eq(0)").change(function(){ //code }

随机推荐