javascript - jQuery .click() 似乎不会取消选中单选框

Question

我正在尝试在单选框上动态创建一个重置按钮，然后说重置按钮在用户单击该按钮时取消选中任何现有选项，但当我单击它时，没有任何反应。我可能遗漏了一些明显但不确定是什么的东西。

http://jsfiddle.net/sFUBV/5/

$('.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);
});