jQuery - 取消选中复选框[重复]答案

【问题标题】：jQuery - Uncheck checkboxes [duplicate]jQuery - 取消选中复选框[重复]
【发布时间】：2016-05-10 06:27:56
【问题描述】：

我认为这应该很容易。这里有很多关于使用 jQuery 取消选中复选框的答案，但是当我尝试它们时，它们似乎不起作用。我想取消选中它们作为我重置表单功能的一部分。

我有一个循环，我在里面创建了复选框： <input type="checkbox" name="is_chosen[]" value="{{ $sample->id }}" class="flat">

这是我取消选中复选框的代码（最初并非所有复选框都被选中）：

$('input:checkbox').each(function () {
  if(this.checked) {
    $(this).attr('checked', false);
  }
});

我也尝试用prop 替换attr。我也试过只使用$(input:checkbox).prop('checked', false);。我已经尝试了更多其他人，但他们没有工作。我错过了什么？

【问题讨论】：

应该是$(input:checkbox).prop('checked', false);。如果它不起作用，请检查 $(input:checkbox) 选择的内容。
demo查看演示它的工作原理
Click Here 希望对您有所帮助:)
你不需要循环。只需使用 $(":checked").attr('checked', false);就像我的回答一样
对于给您带来的不便，我们深表歉意。我发现问题出在class="flat"（来自 Bootstrap），虽然我不知道究竟是为什么。我很担心，因为你的答案都不起作用。然后我想到了删除课程。当类在那里时，所有选中的复选框在执行该函数后仍然被选中。当我删除该类时，执行该功能后复选框未选中。我再次尝试了你的答案，它们奏效了。我也尝试了我发布的代码并且它有效。（顺便说一句，我必须将此作为答案发布吗？）

标签： javascript jquery html checkbox

【解决方案1】：

您不需要使用each()。你可以像下面那样做。

$('input:checkbox:checked').prop('checked', false);

【讨论】：

使用 .attr() 函数对我不起作用，但 .prop() 函数可以

【解决方案2】：

确实有效：https://jsfiddle.net/bfqew4du/

setInterval(function(){
  $('input:checkbox').each(function () {
    $(this).attr('checked', !this.checked);
  });
},1000);

确保在 DOM 加载后运行 javascript。

【讨论】：

这里不需要循环，因为它可以使用 $(":checked").attr('checked', false);
循环与否几乎不是问题，尽管@ArunSharma。这回答了这个问题。
@Mackan 这不仅仅是回答问题。你的代码必须干净、清晰、切中要害。 setInterval 和 .each 在这里是无用的代码块。
如果他为了 stackOverflow 将代码清理到这些行但在他的应用程序中需要 forEach 逻辑怎么办？这仍然是 100% 有效的。
@ArunSharma 我同意，但最重要的部分是回答这个问题，而你和另一个答案都没有做到这一点。

【解决方案3】：

不需要循环，一行代码就可以实现：使用$(":checked").attr('checked', false);

$(document).ready(function(){
    $(":checked").attr('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">

【讨论】：

【解决方案4】：

给动态元素应用一个唯一的类名是个好主意，这样就可以使用这个类名来选择它们。因此，在生成时，您可以在复选框中附加一个类名

...append('<input type="checkbox" name="is_chosen[]" value="1" class="flat dynmc-check">');

然后使用此类dynmc-check 选择这些复选框：

$('.dynmc-check')

使用此选择器可以执行所需的操作，例如重置复选框：

$('.dynmc-check').removeAttr('checked');

或计算选中的：

var checkCount = $('.dynmc-check:checked').length;

详情请见this working fiddle。

【讨论】：

【解决方案5】：

对于给您带来的不便，我深表歉意。

我发现问题出在class="flat"（来自 Bootstrap），虽然我不知道具体原因。我很担心，因为你的答案都不起作用。然后我想到了删除课程。当类在那里时，所有选中的复选框在执行函数后仍然被选中。当我删除该类时，执行该功能后复选框未选中。我再次尝试了你的答案，它们奏效了。我也尝试了我发布的代码并且它有效。所以一直都是上课。

【讨论】：