jQuery获取所选单选按钮的值

时间：2011-12-24 02:43:35

标签： jquery radio-button siebel

问题陈述很简单。我需要查看用户是否从广播组中选择了一个单选按钮。组中的每个单选按钮都共享相同的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代码来帮助我获得已检查单选按钮的值吗？

30 个答案:

答案 0 :(得分：909)

只需使用。

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

这很容易。

答案 1 :(得分：300)

首先，您不能拥有多个具有相同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();
}

答案 2 :(得分：69)

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

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

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

答案 3 :(得分：41)

$("#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(){...});）中。

答案 4 :(得分：35)

  1. 在您的代码中，jQuery只查找输入的第一个实例 名称为q12_3，在这种情况下的值为1.您想要一个 输入名称为q12_3 :checked。
    2. $(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
    1. 请注意，上述代码与使用不同 .is(":checked")。 jQuery＆＃39; s is() function返回一个布尔值（true或false）而不是 元件。

答案 5 :(得分：27)

<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);
}

答案 6 :(得分：21)

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

用于嵌套属性

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

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

答案 7 :(得分：16)

要获取所选单选按钮的值，请使用RadioButtonName和包含RadioButton的表单ID。

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

仅限

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

答案 8 :(得分：16)

获取所有无线电：

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

过滤以获取已选中的

radios.filter(":checked");

<强> OR

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

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

答案 9 :(得分：12)

  

检查示例是否正常

<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>

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

答案 10 :(得分：11)

使用以下代码

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

请注意，应该定义value属性，以便在结果中显示“ Male”或“ Female”。

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

答案 11 :(得分：10)

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

＆＃13;
＆＃13; 
$('#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;
}
＆＃13; 
* { 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; }
＆＃13; 
<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/>
＆＃13;
＆＃13;
＆＃13;

答案 12 :(得分：6)

尝试使用示例

<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>

答案 13 :(得分：6)

仅限姓名

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

答案 14 :(得分：6)

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

答案 15 :(得分：5)

我知道我要参加这么晚。但值得一提的是

<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();
    }
});
});

`

答案 16 :(得分：4)

解释这个简单主题的最佳方法是提供简单的示例和参考链接： -

  

在以下示例中，我们有两个单选按钮。如果用户选择任何单选按钮，我们将在警告框中显示所选的单选按钮值。

HTML：

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery的： - 

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

答案 17 :(得分：3)

<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

并处理jquery表示设置值/通过div id改变：

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

它很容易....： - }

答案 18 :(得分：3)

此代码有效

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

答案 19 :(得分：2)

另一种理解的简单方法......它的工作：

HTML代码： 

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery代码： 

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

答案 20 :(得分：2)

要转换为数组的多组单选按钮秘密值

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

答案 21 :(得分：1)

这是2个单选按钮，即rd1和Radio1 

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" />

通过检查个人（“：已检查”）属性来检查选中哪个单选按钮的最简单方法

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

答案 22 :(得分：1)

我不是一个javascript人，但我在这里找到了搜索这个问题。对于谁谷歌它并在这里找到，我希望这有助于一些。所以，如果我们有一个单选按钮列表，那就是问题：

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

我可以找到使用此选择器选择的那个：

$('.list input[type="radio"]:checked:first').val();

即使没有选择元素，我仍然没有得到未定义的错误。因此，在获取元素值之前，您不必编写额外的if语句。

这是非常基本的jsfiddle example。

答案 23 :(得分：1)

对于多个单选按钮，您必须在单选按钮标签上放置相同的名称属性。 例如;

<input type="radio" name"gender" class="select_gender" value="male">
<input type="radio" name"gender" class="select_gender" value="female">

一旦你有了单选选项，现在你可以执行如下的 jQuery 代码来获取选中/选中单选选项的值。

$(document).on("change", ".select_gender", function () {
   console.log($(this).val());    // Here you will get the current selected/checked radio option value
});

注意：使用 $(document) 是因为如果单选按钮是在 DOM 100% 加载后创建的，那么你需要它，因为如果你不使用 $(document) 那么 jQuery 将不知道新创建的范围单选按钮。像这样执行 jQuery 事件调用是一个很好的做法。

答案 24 :(得分：0)

    <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 >

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

答案 25 :(得分：0)

HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

答案 26 :(得分：0)

  

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

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

我希望这会有所帮助。

答案 27 :(得分：0)

如果您不知道具体的名称或要检查表单中的所有无线电输入，则可以使用全局变量来为每个无线电组仅检查一次值： `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`

答案 28 :(得分：0)

input也不是其他答案所建议的。 也可以使用以下代码：

var variable_name = $("[name='radio_name']:checked").val();

答案 29 :(得分：0)

HTML标记： 

<div class="form-group">
  <input id="rdMale" type="radio" class="clsGender" value="Male" name="rdGender" /> Male
  <input id="rdFemale" type="radio" class="clsGender" value="Female" name="rdGender" /> Female
 </div>

通过单选按钮ID获取所选值： 

 $("input[name='rdGender']").click(function () {
     alert($("#rdMale").val());
});

通过单选按钮类名称获取价值 

 $(".clsGender").click(function () {
       alert($(this).val());
            //or
      alert($(".clsGender:checked").val());
   });

按名称获取价值 

   $("input[name='rdGender']").click(function () {
          var rdVaule = $("input[name='rdGender']:checked").val();
          alert(rdVaule);
   });
相关问题
最新问题