CODEWITHSUNDEEP
javascriptjquerycheckbox
TheMartianGuy
TheMartianGuy

Reputation: 87

Uncheck a "Check all" Checkbox

I made a table that has checkbox at the beginning of the row. I also made a "Check All" checkbox. When that is "checked", all other checkbox on the table will be checked. That works fine. But, when I "unchecked" one checkbox on the table, the "Check All" checkbox is still "checked". How can I uncheck it when one of the other checkboxes changed?

I have my code here:

Script:

$('#chkall').change(function() {
var checkboxes = $(this).closest('table').find(':checkbox');
if($(this).is(':checked')) {
    checkboxes.prop('checked', true);
} else {
    checkboxes.prop('checked', false);
}
});

Table (html):

<table class="table table-hover">
                <tr>
                    <th><input type ="checkbox" id = "chkall"></th>
                    <th>Type</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Serial No</th>
                    <th>Asset No</th>
                    <th>Date of Purchased</th>
                    <th>Warranty Expiration</th>
                    <th>Status</th>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>
</table>

Upvotes: 1

Views: 838

Answers (6)

jorrin
jorrin

Reputation: 512

Try something like this:

$('#chkall').on("change", function() {
  if (!$(this).is(':checked')) {
    $('.selectRow').prop('checked', false);
  } else {
    $('.selectRow').prop('checked', true);
  }
});

  $('.selectRow').each(function( index ){
     $(this).on("change", function(){
     if (!$(this).is(':checked')) {
       $('#chkall').prop('checked', false);
     }
     });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" id="chkall" >Check All</input>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
          <input type="checkbox" class="selectRow" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="selectRow" />
        </td>
      </tr>
    </tbody>

  </table>

Upvotes: 0

ibo_s
ibo_s

Reputation: 425

Try to add another change event to all your checkboxes like this

$('.yourcheckboxclass').change(function() { });

or

$('#yourtable input:checkbox').change(function() { });

inside the function, select your #chkall and uncheck it.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Try comparing the number of checkboxes with the number of checked checkboxes 

$('table').on('change', ':checkbox:not(#chkall)', function(){
   var checkboxes = $(this).closest('table').find(':checkbox:not(#chkall)'),
       allchecked = (checkboxes.length === checkboxes.filter(':checked').length);

   $('#chkall').prop('checked', allchecked);
});

This code will also enable the check-all if you manually check ever single checkbox

Full example

$('#chkall').change(function() {
  var checkboxes = $(this).closest('table').find(':checkbox');
  if ($(this).is(':checked')) {
    checkboxes.prop('checked', true);
  } else {
    checkboxes.prop('checked', false);
  }
});

$('table').on('change', ':checkbox:not(#chkall)', function() {
  var checkboxes = $(this).closest('table').find(':checkbox:not(#chkall)'),
    allchecked = (checkboxes.length === checkboxes.filter(':checked').length);

  $('#chkall').prop('checked', allchecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table table-hover">
  <tr>
    <th>
      <input type="checkbox" id="chkall">
    </th>
    <th>Type</th>
    <th>Brand</th>
    <th>Description</th>
    <th>Serial No</th>
    <th>Asset No</th>
    <th>Date of Purchased</th>
    <th>Warranty Expiration</th>
    <th>Status</th>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>
</table>

Upvotes: 1

Barmar
Barmar

Reputation: 780974

Add a handler for all the other checkboxes that clears the check-alll box.

$(":checkbox:not(#chkall)").change(function() {
    if (!this.checked) {
        $("#chkall").prop("checked", false);
    }
});

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240928

You could compare the number of checkboxes with the number of checked checkboxes.

If the numbers aren't equal when a change event is fired, uncheck the #chkall element:

Example Here

$('table :checkbox:not(#chkall)').on('change', function () {
  if ($(this).length !== $(this).closest('table').find(':checked:not(#chkall)').length) {
    $('#chkall').prop('checked', false);
  }
});

Upvotes: 0

Stefano Dalpiaz
Stefano Dalpiaz

Reputation: 1673

You can just add this event handler:

$('#chkall').closest('table').on('change', ':checkbox:not(#chkall)', function() {
    if (!$(this).is(':checked'))
        $('#chkall').prop('checked', false);
});

Upvotes: 0

Related Questions