jQuery获取所选单选按钮的值

问题陈述很简单。我需要查看用户是否从无线电组中选择了单选按钮。组中的每个单选按钮共享相同的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代码，可以帮助我得到检查单选按钮的值？

1599260 次浏览
小开 
$("#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(){...});）中。

小开

首先，你不能拥有多个具有相同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();
}
小开 
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
// do something
小开 
<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);
}

更多细节在我的博客：https://webexplorar.com/jquery-get-selected-radio-button-value/

小开

只是使用。

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

就是这么简单。

小开

我不是一个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示例。

小开

解释这个简单主题的最好方法是给出简单的例子和参考链接：

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

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());
});
});
小开 
<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的警报作为th e值设置/改变通过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());
});

很容易……：-}

小开

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

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

或仅 

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

检查示例它运行良好

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

小开

这里有两个单选按钮，即rd1和Radio1 

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

检查哪个单选按钮被选中的最简单的方法，通过检查单个是（"： check"）属性

if ($("#rd1").is(":checked")) {
alert("rd1 checked");
}
else {
alert("rd1 not checked");
}
小开
  1. 在你的代码中，jQuery只查找输入的第一个实例 名称q12_3，在本例中值为1。您想要一个 输入名称q12_3是:checked。
$(function(){
$("#submit").click(function() {
alert($("input[name=q12_3]:checked").val());
});
});
  1. 注意上面的代码和使用的不一样 .is(":checked")。 jQuery的is() 函数返回布尔值（true或false）而不是 元素。
小开 
    <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());
});
});`
小开

获取所有无线电：

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

过滤以获取已检查的那个

radios.filter(":checked");

或者

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

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

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

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

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

小开

试试这个例子

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

另一个简单的方法来理解……它的工作：

超文本标记语言代码：

 <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);
});
小开 
 $("input[name='gender']:checked").val()

对于嵌套属性

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

别忘了名字的大括号

小开

仅限姓名

$(function () {
$('input[name="EventType"]:radio').change(function () {
alert($("input[name='EventType']:checked").val());
});
});
小开 
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");
}
}
});
小开

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

$('#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/>

小开

使用下面的代码

$('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>
小开

多组单选按钮隐蔽值到数组

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

小开

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

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

我希望这会有帮助。

小开

如果您不知道SEPCIC名称或想检查表单中的所有无线电输入，您可以使用全局var来检查每个无线电组的值一次： '

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

甚至input也不是其他答案所建议的必要条件。 也可以使用以下代码：

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

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

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

'

小开

超文本标记语言：

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

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

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

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

小开

这个代码有效。

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

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

var value = $(":radio:checked").val()
小开 
 <div class="col-md-12">
<div class="form-radio">
<input class="radio-outlined" id="accept_new_login1" type="radio" name="aNL" value="1">
<label for="accept_new_login1" class="radio-teal">Yes</label>
<input class="radio-outlined" id="accept_new_login2" type="radio" name="aNL" value="0">
<label for="accept_new_login2" class="radio-teal">No</label>
</div>
</div>


<script>
$("input[name=aNL]").on("click" , function () {
console.log("test" ,$("#accept_new_login").val() , this.value , this.id );
})


</script>

这个解决方案不仅简单，还告诉选择的ID和值。你可以检查我的输出。

输入图片描述

小开

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

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

提交答案