如何使用jQuery选中单选按钮？

Question

我尝试使用jQuery选中单选按钮。这是我的代码：

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

而 JavaScript 的代码是：

jQuery("#radio_1").attr('checked', true);

无法正常工作：

jQuery("input[value='1']").attr('checked', true);

无法正常工作：

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

无效：

你有其他想法吗？我错过了什么吗？

- Alexis

---

感谢您的回复！我找到了问题所在。实际上，前两种方法都是可行的。 问题在于我使用jqueryUI将一组3个单选按钮转换为一个按钮集，使用以下代码： jQuery("#type").buttonset();但在检查单选按钮之前进行此更改会破坏单选按钮集（不知道为什么）。 最后，我在检查单选按钮后调用buttonset，它完美地工作了。 - Alexis

Answer 1

对于 jQuery 版本大于或等于（>=）1.6，请使用：

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

对于小于 (<) 1.6 版本，请使用：

$("#radio_1").attr('checked', 'checked');

提示：您可能还想在单选按钮上调用click()或change()。 更多信息请参见注释。

- Mike Thomsen

---

在jQuery 1.9或更高版本中，这个解决方案将无法使用。请改用$("#radio_1").prop("checked", true);代替。 - installero

在末尾添加 .change() 可以触发页面上的任何其他事件。 - Foxinni

如果您希望单选框组中的其他单选框正确更新，请使用$("#radio_1").prop("checked", true).trigger("click");。 - Paul LeBeau

Answer 2

试一下这个。

在这个例子中，我使用输入的名称和值来定位它。

$("input[name=background][value='some value']").prop("checked",true);

需要知道的是：如果有多个单词的值，也会因为使用了撇号而起作用。

- Vladimir Djuricic

---

由于某种原因，当仅使用ID时无法解决一个麻烦的单选按钮组问题，但这个方法对我有效。 - Michael K

@MichaelK 也许有另一个具有相同ID但不是输入类型的元素？ - Vladimir Djuricic

我找了一下，但没有其他具有相同ID的内容。这很奇怪。我注意到在源代码中，我已经为最初选中的单选按钮“checked”了。但是在检查器中，我看到它是“checked =””，所以我想知道这种差异是否有任何意义。 - Michael K

Answer 3

简短易懂的选项：

$("#radio_1").is(":checked")

它返回真或假的值，因此您可以在"if"语句中使用它。

- Petr Lazarev

---

谢谢！这正是我要找的，但是（供参考），OP 是在问如何设置单选按钮，而不是获取值。（check 这个词让问题很容易混淆。） - Bampfer

Answer 4

jQuery 1.6新增了一个名为prop()的函数，其作用与此相同。

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

- Umesh Patil

---

使用 jQuery 1.9 后，我的 attr('checked', true) 不起作用了，这就是解决方案！ - Pascal

Answer 5

试一下。

要使用值来检查单选按钮，请使用此代码。

$('input[name=type][value=2]').attr('checked', true); 

或者

$('input[name=type][value=2]').attr('checked', 'checked');

或者

$('input[name=type][value=2]').prop('checked', 'checked');

要使用ID检查单选按钮，请使用以下代码。

$('#radio_1').attr('checked','checked');

或者

$('#radio_1').prop('checked','checked');

- Lakshmana Kumar

Answer 6

使用 prop() 方法

来源：链接

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

- Code Spy

Answer 7

试一试：

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/

- user4457035

---

重要的是使用.val(['1'])而不是.val('1')。 - Bob Stein

Answer 8

$.prop 的方式更好：

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

你可以按照以下方式测试它：

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

- Amin Saqi

Answer 9

令人惊讶的是，最受欢迎和被接受的答案忽略了触发适当的事件，尽管有评论。请确保调用 .change()，否则所有“更改”绑定都将忽略此事件。

$("#radio_1").prop("checked", true).change();

- apatsekin

Answer 10

你需要做的是：

jQuery("#radio_1").attr('checked', 'checked');

那是HTML属性。

- JohnP