jQuery-取消选中复选框

jQuery - Uncheck checkboxes

本文关键字：复选框 取消 jQuery-      更新时间：2023-09-26

我认为这应该很容易。这里有很多关于使用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);。我尝试了更多的方法，但都不起作用。我错过了什么？

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

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

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

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

请确保在DOM加载后运行javascript。

您不需要循环，只需一行代码即可实现：使用$(":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">

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

...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;

有关详细信息，请参阅此工作小提琴。

很抱歉给大家带来不便。

我发现问题出在class="flat"（来自Bootstrap）上，尽管我不知道确切的原因。我开始担心，因为你的答案都不起作用。然后我想把课撤了。当类在那里时，所有选中的复选框在执行函数后仍然被选中。当我删除该类时，在执行该函数后，复选框变为未选中状态。我又试了一遍你的答案，结果奏效了。我也试过我发布的代码，它很有效。所以一直都是这个班。

相关文章：