jQuery获取所选单选按钮的值

Question

问题陈述很简单.我需要查看用户是否从广播组中选择了一个单选按钮.组中的每个单选按钮共享相同的ID.

问题是我无法控制表单的生成方式.以下是单选按钮控件代码的示例代码:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

除此之外,当选择单选按钮时,它不会向控件添加"已选中"属性,只是选中 了文本(我猜测只检查了没有值的属性).以下是所选无线电控制的外观

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

任何人都可以帮助我使用jQuery代码,可以帮助我获得已检查单选按钮的值吗？

Answer 1

只是用.

$('input[name=name_of_your_radiobutton]:checked').val();

这很容易.

Answer 2

首先,您不能拥有具有相同ID的多个元素.我知道你说你无法控制表单的创建方式,但是......尝试以某种方式从无线电中删除所有ID,或者使它们成为唯一的.

要获取所选单选按钮的值,请使用:checked过滤器按名称选择它.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

编辑

所以你无法控制名字.在这种情况下,我会说这些单选按钮全部放在一个div中,比如命名radioDiv,然后稍微修改你的选择器:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

Answer 3

获取所选单选按钮值的最简单方法如下:

$("input[name='optradio']:checked").val();

选择器之间不应使用空格.

Answer 4

$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

确保将其包装在DOM就绪函数($(function(){...});或$(document).ready(function(){...});)中.

Answer 5

1. 在你的代码中,jQuery只查找名为q12_3的输入的第一个实例,在这种情况下,它的值为1.你想要一个名为q12_3的输入:checked.

$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});

2. 请注意,上面的代码与使用不同 .is(":checked").jQuery的is() 函数返回一个布尔值(true或false)而不是元素.

Answer 6

<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

这将返回,检查单选按钮值.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

Answer 7

 $("input[name='gender']:checked").val()

对于嵌套属性

$("input[name='lead[gender]']:checked").val()

不要忘记单个大括号的名字

Answer 8

获取所有无线电:

var radios = $("input[type='radio']");

过滤以获得已检查的那个

radios.filter(":checked");

要么

另一种可以找到单选按钮值的方法

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

Answer 9

要获取所选单选按钮的值,请使用RadioButtonName和包含RadioButton的Form Id.

$('input[name=radioName]:checked', '#myForm').val()

或仅限于

$('form input[type=radio]:checked').val();

Answer 10

检查示例它工作正常

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

Answer 11

使用以下代码

$('input[name=your_radio_button_name]:checked').val();

请注意,应定义value属性,以便在结果中获得"男性"或"女性".

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>

Answer 12

请参阅下面的工作示例,其中包含一组与不同部分相关联的无线电组.您的命名方案很重要,但理想情况下,您应该尝试使用一致的命名方案进行输入(特别是当它们在这里的部分时).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}

* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

Answer 13

您可以使用父表单查找单选输入值。您不知道表单是如何生成的，但您可以为表单提供类。

$('.form_class input[type=radio]:checked').val();

Answer 14

这是获取所选单选按钮值的简短版本

var value = $(":radio:checked").val()

Answer 15

此代码有效。

var radioValue = $("input[name='gender']:checked").val();

Answer 16

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

Answer 17

试试这个例子吧

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

Answer 18

仅按名称

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

Answer 19

我知道我这么晚才加入。但值得一提的是，它需要

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

然后我在我的js中检查了这个。它可能像

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`

Answer 20

您可以在 javascript/jQuery 中使用它通过 Id 获取所选单选按钮的值。

$("#InvCopyRadio:checked").val();

我希望这将有所帮助。