CODEWITHSUNDEEP
jquerydjangocheckbox
fakeMake
fakeMake

Reputation: 778

How to check and keep checkboxes checked when others are unchecked

I have check boxes that when I check 3of them for example and then I uncheck 1, an attribute works in the opposiste. With this I mean that Because I have a default hidden button that appears when I check a checkbox, when I hav e 3 of the checkboxes checked and I uncheck 1, the button is hidden where as 2 checkboxes are still checked meaning that the button should be unhidden. How would I correct this????

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

Upvotes: 1

Views: 147

Answers (1)

Swati
Swati

Reputation: 28522

You can use $("[name=marked_delete]").filter(':checked').length to get length of checked checkboxes and if length is > 0 simply show button else hide.

Demo Code :

$(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>

Upvotes: 1

Related Questions