未选中其他复选框时如何检查并保持选中状态答案

【问题标题】：How to check and keep checkboxes checked when others are unchecked未选中其他复选框时如何检查并保持选中状态
【发布时间】：2021-05-26 04:31:23
【问题描述】：

我有复选框，例如，当我选中其中的 3 个然后取消选中 1 时，一个属性在对立面起作用。我的意思是因为我有一个默认隐藏按钮，当我选中一个复选框时会出现，当我选中了 3 个复选框并取消选中 1 个时，按钮被隐藏，因为仍然选中了 2 个复选框，这意味着按钮应该不隐藏。我该如何纠正这个？？？？

<script>
    $(document).ready(function() {
    $('#select-all').click(function() {
        var checked = this.checked;
        $('input[type="checkbox"]').each(function() {
        this.checked = checked;
        });
      })
    });
        //Add a JQuery click event handler onto our checkbox.
    $('input[type="checkbox"]').click(function(){
        //If the checkbox is checked.
        if($(this).is(':checked')){
            //Enable the submit button.
            $('#delete_all').attr("hidden", false);
        } else{
            //If it is not checked, hide the button.
            $('#delete_all').attr("hidden", true);
        }
    });
  </script>


<form method="post" action="{% url 'delete_students' %}">
    {% csrf_token %}
    <table class="layout container">
      <thead>
          <th><input type="checkbox" id="select-all"></th>
      </thead>
      <tr>
        <td>
          <input type="checkbox" name="marked_delete" value="{{ student.pk }}">
        </td>
    </table>

      <button class="btn btn-dark" id="delete_all" hidden="hidden">Delete Selected</button>
</form>

【问题讨论】：

标签： jquery django checkbox

【解决方案1】：

您可以使用$("[name=marked_delete]").filter(':checked').length 获取选中复选框的长度，如果长度为> 0，则只需显示按钮，否则隐藏。

演示代码：

$(document).ready(function() {
  $('#select-all').click(function() {
    var checked = this.checked;
    $('input[type="checkbox"]').each(function() {
      this.checked = checked;
    });
  })
});
$('input[type="checkbox"]').click(function() {
  //filter total checked checkboxes.. or use input[type="checkbox"] as selector..
  if ($("[name=marked_delete]").filter(':checked').length > 0) {
    $('#delete_all').prop("hidden", false);
  } else {
    $('#delete_all').prop("hidden", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="{% url 'delete_students' %}">

  <table class="layout container">
    <thead>
      <th><input type="checkbox" id="select-all"></th>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="marked_delete" value="{{ student.pk }}">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="marked_delete" value="{{ student.pk }}">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="marked_delete" value="{{ student.pk }}">
        </td>
      </tr>
    </tbody>
  </table>

  <button class="btn btn-dark" id="delete_all" hidden="hidden">Delete Selected</button>
</form>

【讨论】：