1

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

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);
});
4

4 回答 4

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);
});
于 2013-03-28T20:44:20.060 回答
1

您不想使用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 来执行此操作。这只是查看 current 中的所有单选按钮li.input，因此您可以在任何地方使用它，而不必担心问题 ID 和插值废话。

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

于 2013-03-28T21:01:03.647 回答
0

这有效：

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

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

于 2013-03-28T20:50:58.093 回答
0

试试这一行而不是 each() 函数

$('.reset-button').click(function () {
    $('#form input[type="radio"]:checked').prop('checked', false);
});
于 2013-03-29T12:53:50.980 回答