Question

我正在尝试动态创建无线电盒上的重置按钮，然后在用户单击按钮时取消选中任何现有选项，但是当我单击它时，没有任何反应。我可能错过了一些明显但不确定的东西。

$('.surveyor_radio').parent().parent().append('<div class="reset-button">A reset button</div>');

$('.reset-button').click(function () {
    $('#form input[type="radio":checked]').each(function () {
        $(this).prop('checked', false);
    });
});

$('fieldset').each(function () {
    var qid = $(this).attr('id');
    $('.reset-button', $(this)).attr('data-question-id', qid);
});

Answer 1

替换

$('#form input[type="radio":checked]')

与

$('#form input[type="radio"]:checked')

但是，请注意您的代码不区分单选按钮组，并且只需取消选中整个表单中的所有单选按钮。

幸运的是，您已经在单选按钮上存储了data-question-id，因此我们可以使用它来提供上下文而不是#form：

$('.reset-button').click(function () {
    $('input[type="radio"]:checked','#'+$(this).data('question-id')).each(function () {
        $(this).prop('checked', false);
    });
});

http://jsfiddle.net/mblase75/sFUBV/10/

正如nzifnab指出的那样，我们甚至可以进一步简化：

$('.reset-button').click(function () {
    $('input[type="radio"]','#'+$(this).data('question-id')).prop('checked', false);
});

Answer 2

您不想使用removeAttr，prop方法就足够了。

您不必使用.each，因为在jquery集合上调用的大多数jquery方法已经在所述集合的每个对象上执行。

这有效：http://jsfiddle.net/sFUBV/14/

$('.surveyor_radio').parent().parent().append('<div class="reset-button">A reset button</div>');

$('.reset-button').on('click', function () {
  $(this).
    closest('li.input').
    find('input[type=radio]').
    prop('checked', false);
});

没有理由添加:checked选择器，因为如果你取消选中一个没有选中的选项，那么无论如何都要取消选中它们？同样的事情发生在任何一种方式。

另请注意，您不一定要按照接受的答案所示的问题ID来执行此操作。这只是查看当前li.input中的所有单选按钮，因此您可以在任何地方使用它，而无需担心问题ID和插值无意义。

此外，您应该使用on绑定事件，而不是click或live

Answer 3

这有效：

$("input[type='radio']:checked").each(function () {
    $(this).removeAttr('checked');
});

检查小提琴：http://jsfiddle.net/sFUBV/9/

Answer 4

尝试这一行而不是每个（）函数

$('.reset-button').click(function () {
    $('#form input[type="radio"]:checked').prop('checked', false);
});

jQuery .click（）似乎没有启动无线电盒的取消选中

4 个答案: