jquery - 使用 jQuery 通用选择器取消选中单选按钮

Question

我有以下表格(它是动态生成的，我有几个副本，名为 form-0 到 form-3)

<form id="form-0" name="0">
<b>what is bla?</b><br>
<div class="ansN" id="ans0"><input type="radio" name="answerN" value="0"> aaa </div>
<div class="ansN" id="ans1"><input type="radio" name="answerN" value="1"> bbb </div>
<div class="ansN" id="ans2"><input type="radio" name="answerN" value="2"> ccc </div>
<div class="ansN" id="ans3"><input type="radio" name="answerN" value="3"> ddd </div>
<input type="submit" value="Submit your answer">
</form>

(忽略 div，它们用于其他目的)

我尝试创建一个取消选中的功能，以便对页面上的所有单选按钮起作用，所以我玩了控制台并尝试使用这个取消选择它们:

$('form[id^="form-"]').find("input:radio:checked").attr('checked', false);
$('form[id^="form-"]').find("input:radio:checked").removeAttr("checked");

所以选择器确实找到了所有选中的按钮，但并没有取消选中它们，为什么？当我使用直接 JS 调用时:document.forms[0].answerN[3].checked = false 它工作正常，所以我可以在循环中使用它，但我尽量避免在这里循环。有没有更好的办法？

我的目标是有一个取消选中的功能，所以第二次点击单选按钮本身会取消选中它

Answer 1

如果您使用的是 jQuery 1.6，您可以使用 prop()而不是 attr() :

$('form[id^="form-"]').find("input:radio:checked").prop('checked',false);

// OR (not recommended)

$('form[id^="form-"]').find("input:radio:checked").removeProp('checked');

但是，根据 documentation，不建议使用 removeProp 变体:

Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

(感谢@noah1989 指出这一点)

attr() 检索已在源代码中设置的值，prop() 检索属性的当前动态设置值。

你可以看到一个jsFiddle example here