如何使用 jQuery 设置选中的单选选项答案

【问题标题】：how to set radio option checked onload with jQuery如何使用 jQuery 设置选中的单选选项
【发布时间】：2010-10-26 15:27:09
【问题描述】：

如何使用 jQuery 设置选中的单选选项？

需要检查是否没有设置默认值，然后设置一个默认值

【问题讨论】：

标签： jquery radio-button

【解决方案1】：

假设您有这样的单选按钮，例如：

    <input type='radio' name='gender' value='Male'>
    <input type='radio' name='gender' value='Female'>

如果没有选中收音机，您想检查值为“Male” onload 的那个：

    $(function() {
        var $radios = $('input:radio[name=gender]');
        if($radios.is(':checked') === false) {
            $radios.filter('[value=Male]').prop('checked', true);
        }
    });

【讨论】：

只是想知道 Paolo，IIRC 规范说 checked 属性是为了被 check="checked" （尽管我可能错了）。在此示例中，jQuery 是否将 true 转换为“已检查”？只是好奇...
我原来的例子有 'checked','checked' ，这是我永远不记得哪一个是正确的事情之一。 jQuery 以任何一种方式计算出来，但我知道如果你想设置一个 DOM 元素的实际检查属性，它应该是一个布尔值，比如 document.getElementById('x').checked = true; - 所以我同意了。
只想添加这个方括号符号 [name=gender] 在 windows phone 7 的股票浏览器中不起作用。
我刚刚用 FF 和 jQuery 1.9.1 和 .attr('checked', true);不起作用，但是 .prop('checked', true);做。看看stackoverflow.com/questions/4618733/…（重复？）
一个快速的：不要在道具前使用$radios.removeAttr('checked')。它会混淆浏览器和发布的值。

【解决方案2】：

一个班轮怎么样？

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);

【讨论】：

以上更好，因为它支持更复杂的名称值。
这并没有完全回答 ops 问题 - 它需要首先检查是否已经检查了默认选项。此外，您现在应该使用 prop() 而不是 attr() 来处理这种事情。有关说明，请参阅此处的“属性与属性”部分：api.jquery.com/prop。也不需要额外的过滤器，您可以组合 2 个选择器，例如$("input[name=gender][value=Male]").prop("checked", true);
此解决方案在我第一次设置收音机时有效，但之后失败。通过使用“prop”而不是“attr”，它可以完美地工作。所以： $('input:radio[name="gender"]').filter('[value="Male"]').prop('checked', true);
正确 - prop() 现在是访问属性的推荐方法。
更简单：$('input:radio[name="gender"][value="Male"]').attr('checked', true);

【解决方案3】：

不需要所有这些。使用简单而旧的 HTML，您可以实现您想要的。如果您让您想要的收音机默认检查如下：
<input type='radio' name='gender' checked='true' value='Male'>
当页面加载时，它会被检查。

【讨论】：

是的，但我需要它是动态的，因为引用站点会在页面加载时传递默认值。我已经有一段时间没有想到这个问题了，所以我希望我能理解你想说的意思

【解决方案4】：

这个会导致form.reset()失败：

$('input:radio[name=gender][value=Male]').attr('checked', true);

但这一个有效：

$('input:radio[name=gender][value=Male]').click();

【讨论】：

我建议您使用 trigger('click') 更具可读性并停止方法调用。

【解决方案5】：

我喜欢@Amc 的回答。我发现表达式可以进一步压缩以不使用 filter() 调用（@chaiko 显然也注意到了这一点）。此外，对于 jQuery v1.6+，prop() 是与 attr() 比较的方法，有关该主题的官方最佳实践，请参阅 jQuery documentation for prop()。

考虑与@Paolo Bergantino 的回答相同的输入标签。

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

更新后的单行代码可能如下所示：

$('input:radio[name="gender"][value="Male"]').prop('checked', true);

【讨论】：

【解决方案6】：

如果您希望它是真正动态的并选择与传入数据相对应的无线电，则此方法有效。它使用传入的数据的性别值或使用默认值。

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};

【讨论】：

【解决方案7】：

 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);

【讨论】：

请不要发布仅代码的答案。也请解释一下。

【解决方案8】：

我认为您可以假设，该名称是唯一的，并且组中的所有收音机都具有相同的名称。然后你可以像这样使用 jQuery 支持：

$("[name=gender]").val(["Male"]);

注意：传递数组很重要。

调节版：

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

【讨论】：

这很糟糕，你扫描每个元素的值我不建议使用它
@MartinBarker 你能解释一下你们男人通过“扫描”做什么吗？
搜索 DOM，如果你只使用一个属性，你会强制 jQuery 遍历 DOM 中的每个元素并检查匹配是否与使用 $("*") 一样，它将匹配所有内容您应该使用至少 $("input") 的类型，否则 ID 将是理想的，因为 DOM 具有通过 id 获取元素的本机调用
@MartinBarker - 我同意。通常我会在选择器前面加上表单 id 或提供上下文参数。目前扫描 DOM 不是 jQuery 工作，而是内部浏览器引擎，document.querySelectorAll 完成所有工作。
要解决上述问题，请使用$("input[name=gender]") 或$("input[name=gender]:radio") 或（对于现代浏览器）$("input[name=gender][type=radio]")

【解决方案9】：

//如果你是在javascript或backbone之类的框架上做的，你会经常遇到这种情况你可以有这样的东西

$MobileRadio = $( '#mobileUrlRadio' );

同时

$MobileRadio.checked = true;

不会工作，

$MobileRadio[0].checked = true;

会的。

你的选择器也可以像上面推荐的那样。

【讨论】：

【解决方案10】：

在获取无线电输入值时注意此行为：

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

所以$('input[name="myRadio"]').val() 不会像您预期的那样返回单选输入的检查值——它返回第一个单选按钮的值。

【讨论】：

【解决方案11】：

JQuery 实际上有两种方法来设置单选和复选框的选中状态，这取决于您是否在 HTML 标记中使用 value 属性：

如果他们有值属性：

$("[name=myRadio]").val(["myValue"]);

如果它们没有 value 属性：

$("#myRadio1").prop("checked", true);

更多详情

在第一种情况下，我们使用 name 指定整个无线电组，并告诉 JQuery 使用 val 函数查找要选择的无线电。 val 函数采用 1 元素数组并找到具有匹配值的收音机，将其设置为 checked=true。其他同名的将被取消选择。如果没有找到具有匹配值的收音机，则将取消选择所有收音机。如果有多个具有相同名称和值的无线电，则将选择最后一个而取消选择其他无线电。

如果您没有为收音机使用 value 属性，那么您需要使用唯一 ID 来选择组中的特定收音机。在这种情况下，您需要使用 prop 函数来设置“checked”属性。许多人不将 value 属性与复选框一起使用，因此＃2 更适用于复选框而不是收音机。另请注意，当复选框具有相同名称时，它们不会形成组，您可以为复选框使用$("[name=myCheckBox").prop("checked", true);。

你可以在这里玩这个代码：http://jsbin.com/OSULAtu/1/edit?html,output

【讨论】：

【解决方案12】：

以下是上述方法的示例：

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

在javascript中：

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

【讨论】：

【解决方案13】：

如果你想从你的模型中传递一个值，并想根据值从加载组中选择一个单选按钮，那么使用：

jquery：

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

还有html：

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>

【讨论】：

【解决方案14】：

原生 JS 解决方案：

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML：

<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female

【讨论】：

这个解决方案对我有用。这应该是选择的答案。非常干净的方法。

【解决方案15】：

De esta forma Jquery obtiene solo el elemento check

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

【讨论】：

你需要描述你的答案并格式化你的代码

【解决方案16】：

这适用于多个单选按钮

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);

【讨论】：