ChatGPT解决这个技术问题 Extra ChatGPT

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 >

In addition to this when a radio button is selected it doesn't add a "checked" attribute to the control just text checked (I guess just the property checked without a value).以下是所选无线电控件的外观

<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 代码来帮助我获得选中单选按钮的值吗?

您有多个具有相同 ID 的元素?这太可怕了。
这如何与他们都具有相同的 ID 一起工作?当按 ID 评估时,评估不会在第一个匹配的元素处停止吗?它们在不同时间显示的动态元素的目的是什么?
仅供参考,ASP.NET MVC 的 @Html.RadioButtonFor 助手将生成具有相同 ID 的所有单选按钮。哎呀。
试试我在所有解决方案中最好的解决方案。 :: stackoverflow.com/questions/8622336/…

V
Vogel612

就用吧。

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

就这么容易。


不要忘记引号: $("input[name='" + fieldName + "']:checked").val();
为什么这会返回“on”而不是我在 HTML 中指定的值?编辑:因为我的价值观周围没有引号。
$('input[name="name_of_your_radiobutton"]:checked').val();
请注意,如果未选择任何按钮,则只会返回 null,这是合乎逻辑的,但当您习惯于通过 .val() 调用将 "" 视为默认值时,有时会使您感到困惑。
这是正确的,但是,对于那些想要尽可能小的脚本大小的人,您可以在每个单选按钮上使用一个类(例如 class="mo"),然后使用 $(".mo:checked") .val();这当然取决于你有多少单选按钮。如果像我一样,你观察你扔给用户的每一个数据字节,那么了解这两种方法很有用。
D
Dan Doyon

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

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

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

编辑

因此,您无法控制名称。在这种情况下,我会说将这些单选按钮都放在一个名为 radioDiv 的 div 中,然后稍微修改您的选择器:

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

当然,您可以拥有多个具有相同 ID 的元素。这是被禁止的,你不能使用那些 ID,但这是完全可能的,你仍然可以使用元素并通过其他方式解决它们,就像你展示的那样。
c
clami219

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

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

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


最直接的选择,这是。
P
Purag
$("#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 选择单选按钮?您是否将 radioID 更改为其 ID?
M
Madhuka Dilhan

在您的代码中,jQuery 只查找名称为 q12_3 的输入的第一个实例,在本例中其值为 1。您需要名称为 q12_3 的输入,即 :checked。

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

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


S
Sumith Harshan
<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/


对于无法获得输入值的人;需要在它们上设置相同的名称,然后将值设置为 1,2,3.. 如果不设置值,则会将“on”作为默认值。这个答案帮助了我。
佚名
 $("input[name='gender']:checked").val()

对于嵌套属性

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

不要忘记名字的单括号


F
Faisal

获取所有收音机:

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

过滤以获取已检查的内容

radios.filter(":checked");

或者

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

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

我使用 $('[name=your_inputs_names]:checked').val() 因为它们总是具有相同的唯一名称
善用 .filter()
那个.filter()。我希望这个答案可以在顶部。
到目前为止,这是整个页面上最好的答案。 OP 询问如何从一组收音机中取出一个收音机。当您的单选按钮具有唯一 ID 时,上述答案均无效(除非您只有 1 个,否则会这样?)
N
Nadir

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

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

或仅

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

K
Kleo Zane

此代码有效。

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

这与 2014 年的 this highly upvoted answer 中的解决方案相同,只是按钮名称不同。其他几个答案也提到了这一点。 在回答已有答案的旧问题时,请确保提供新颖的解决方案或比现有答案更好的解释。
R
Rajnesh Thakur

检查它工作正常的例子

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


a
anand

使用下面的代码

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

M
MistyDawn

请参阅下面的工作示例,其中包含一组无线电组,每个组与不同的部分相关联。您的命名方案很重要,但理想情况下,您应该尝试对输入使用一致的命名方案(尤其是当它们位于此处这样的部分中时)。

$('#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() || “未选择”;返回值; } * { 边距:0; } div { 边距底部:20px;填充:10px; } h5,标签 { 显示:内联块; } .small { 字体大小:12px; } .hide { 显示:无; } #formDiv { 填充:10px;边框:1px纯黑色; } .center { 显示:块;边距:0 自动;文本对齐:居中; }

Section 1

第一个问题文本

Section 2

第一个问题文本

第二曲estion text

第三题

Section 3

第一个问题文本

第二个问题文本

第三个问题

选择章节编号



选择问题编号








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

当您确定值必须是 checked 时,为什么还要麻烦与 undefined 进行字符串比较? jQuery 中不需要。
在问题中,我没有看到任何信息表明将从一开始就检查一个单选按钮。我的意思是,在大多数情况下,单选按钮都是如此。所以在我们必须检查并且没有选择的情况下, attr("checked") 将返回一个空对象。
是的,但我的意思是返回 null 不会导致错误,因此与 "undefined" 的比较是不必要的。
s
saroj

用例子试试这个

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

A
Arun Prasad E S

仅按名称

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

v
vishpatel73

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

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

我希望这将有所帮助。


非常有效!
这假设至少有 2 个具有相同 ID 的元素 - 这是不正确的,并且某些浏览器会向控制台报告警告。您需要为每个单选按钮分配唯一的 ID,并通过调用每个 ID 来遍历它们。
@lubosdz 是的,我们不应该有 2 个具有相同 ID 的元素。但是,当您检查问题时。用户已从单选组中选择了单选按钮。组中的每个单选按钮共享相同的 id。所以在那种情况下,这很好用。
详细说明,单选按钮概念失败,因为单选按钮作为多个选项提供,只有一个可供选择...单选按钮或复选框集不能具有相同的 ID。一个网页在整个页面中只能有一个唯一的 ID。
A
Ashish

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

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

`


N
Ntiyiso Rikhotso

这是获取选定单选按钮值的较短版本

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

B
Brad Larson

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

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

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

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

这很容易......:-}


使用父 ID 执行此操作的更简单方法是.... $("#subscriptions").on("change", function() { var selection = $(this).find("input:checked") .val();警报(选择);});
Y
Yusuf Uzun

我不是 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


这是对无线电输入的名称属性的错误使用。如果您只想允许组中的单个值,则组中的单选按钮必须具有相同的名称。这样做使它像复选框一样工作,允许在组中进行多项选择而不是单个选择。
@MistyDawn 你是对的,我什至不记得我是怎么写这个的,可能是因为修复了一个错误。
V
Vijay Deva

另一种简单的理解方式......它正在工作:

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

a
alixcol

多组单选按钮将值转换为数组

var arr = []; function r(n) { var section = $('input:radio[name="' + n + '"]:checked').val(); arr[n] = 部分; console.log(arr) } 1 2 3
4 5 6


能否请您添加一些解释,以便更多人能够理解。
s
shivamag00

正如其他答案所建议的那样,即使是 input 也不是必需的。也可以使用以下代码:

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

这与五年前的 this answer 基本相同,只是没有 input 和不必要的引号。
这些引号不是不必要的,我发布上述答案的原因是让人们知道输入不是必需的
那么您应该考虑edit在您的问题中提及这些原因,而不是使用“使用以下代码”命令。您可能希望引用一个说引号是必要的来源。
M
Mohan

这里有 2 个单选按钮,即 rd1 和 Radio1

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

通过检查单个 is(":checked") 属性来检查选中哪个单选按钮的最简单方法

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

这不是一个非常健壮的解决方案。最好只有一个包含的 div,然后查看它下面的所有收音机并选择选中。您还可以查看具有特定名称的所有收音机,然后找到选中的收音机。这减少了每次添加按钮时都必须更改代码。
如果您的页面有超过 2 个无线电输入,这可能会变得非常混乱,并且为每个无线电分配一个 id 将非常耗时。这种方法通常不会被认为是好的做法。
S
Satinder singh

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

T
Tahir Afridi

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

<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 事件调用是一个好习惯。


S
Sandeep kadyan
    <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());
      });
    });`

M
Md. Sohel Rana
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");
        }
    }
});