使用 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变体：

请勿使用此方法删除原生属性，例如 checked、disabled 或 selected。这将完全删除该属性，并且一旦删除，就不能再次将其添加到元素中。使用 .prop() 将这些属性设置为 false。

（感谢@noah1989 指出这一点）

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

你可以看到jsFiddle example here

Answer 2

您应该可以使用

取消选中

$('input[name=foo]').attr('checked', false);

我最初的猜测是您从find 中获得了一组单选按钮。您应该使用.each() 循环它们并将每个单独的checked 属性设置为false。

类似这样的东西（不是 testet，所以可能是语法错误）

$('form[id^="form-"]').find("input:radio:checked").each(
  function() {
    $(this).attr('checked', false);
  }
);

Answer 3

<input type="radio" id="ra1" onclick="change('ra1')" onmousedown="getvalue('ra1')"/>
function getvalue(id){
    ischecked = document.getElementById(id).checked;
}
function change(id){
    if(ischecked == false)
        document.getElementById(id).checked=true;
    else
        document.getElementById(id).checked=false;
}