How do I uncheck 'select-all' checkbox if any child checkbox gets unchecked

Question

I have provided the code which on click select-all checkbox , child checkbox gets checked/unchecked. Now if I deselect any child checkbox , 'select-all' checkbox should get unchecked. How do I do?

$(document).ready(function() {
  $('#select-all').click(function(event) {
    var $that = $(this);
    $(':checkbox').each(function() {
      this.checked = $that.is(':checked');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;">
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr class="w3-gray" style="width:100%">
      <th style="padding:20px;"><input id="select-all" class="w3-check w3-left" type="checkbox"><span style="padding:20px;">User name</span></th>
      <th style="padding:15px;">User Id</th>
      <th style="padding:15px;">Designation</th>
      <th style="padding:15px;">Phone No</th>
      <th style="padding:15px;">Address</th>
    </tr>
    <tr>
      <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td>
      <td style="padding:20px">employee@123</td>
      <td style="padding:20px">security Incharge</td>
      <td style="padding:20px">123456789</td>
      <td style="padding:20px">18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td>
    </tr>
    <tr>
      <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td>
      <td style="padding:20px">employee@123</td>
      <td style="padding:20px">security Incharge</td>
      <td style="padding:20px">123456789</td>
      <td style="padding:20px">awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
    <tr>
      <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td>
      <td style="padding:20px">employee@123</td>
      <td style="padding:20px">security Incharge</td>
      <td style="padding:20px">123456789</td>
      <td style="padding:20px">awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
  </table>
</div>

Answer 1

I'd suggest the following, which allows the #select-all element to check all the 'child' check-boxes, and allows those child check-boxes to check, or uncheck, the #select-all:

// caching the <table> element:
var tableElement = $('table');

// binding the anonymous function of the on() method to the
// 'change' event that takes place on <input> elements of
// type=checkbox:
tableElement.on('change', 'input[type=checkbox]', function(event) {

  // caching the changed element:
  var changed = event.target,

  // caching:
    checkboxes = tableElement

    // <input> elements within the <table>
    // of type=checkbox:
    .find('input[type=checkbox]')

    // which do not match the '#select-all'
    // selector:
    .not('#select-all');

  // if the changed element has the id of 'select-all':
  if (changed.id === 'select-all') {

    // we update the 'checked' property of the cached
    // check-box inputs to reflect the checked state
    // of the '#select-all' element:
    checkboxes.prop('checked', changed.checked);
  } else {

    // here we check that the number of checked checkboxes
    // is equal to the number of check-boxes (effectively
    // finding out whether all, or not-all, check-boxes are
    // checked:
    var allChecked = checkboxes.length === checkboxes.filter(':checked').length

    // here we update the 'checked' property of the
    // '#select-all' check-box to true (if the
    // number of checked check-boxes is equal to the
    // number of check-boxes) or false (if the number
    // of checked check-boxes is not equal to the
    // number of check-boxes):
    $('#select-all').prop(
      'checked', allChecked
    );

  }
});

var tableElement = $('table');
tableElement.on('change', 'input[type=checkbox]', function(event) {
  var changed = event.target,
    checkboxes = tableElement
    .find('input[type=checkbox]')
    .not('#select-all');

  if (changed.id === 'select-all') {
    checkboxes.prop('checked', changed.checked)
  } else {
    var allChecked = checkboxes.length === checkboxes.filter(':checked').length

    $('#select-all').prop(
      'checked', allChecked
    );

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;">
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr class="w3-gray" style="width:100%">
      <th>
        <input id="select-all" class="w3-check w3-left" type="checkbox">
        <span>User name</span></th>
      <th>User Id</th>
      <th>Designation</th>
      <th>Phone No</th>
      <th>Address</th>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
  </table>
</div>

JS Fiddle demo.

If, however, you'd prefer to do this in plain JavaScript:

// a named, rather than anonymous, function to handle
// the functionality, passing in the event Object:
function checkToggle(event) {

  // caching the changed element:
  var changed = event.target,

    // caching the element with the id of 'select-all':
    selectAll = document.getElementById('select-all'),

    // caching all <input> elements of type=checkbox,
    // using Function.prototype.call() to apply
    // Array.prototype.slice() to the HTMLCollection
    // returned by document.querySelectorAll(), in order
    // to convert the Array-like HTMLCollection into an
    // Array:
    checkboxes = Array.prototype.slice.call(
      this.querySelectorAll('input[type=checkbox]')

    // filtering the Array of <input> elements:
    ).filter(function(check) {

    // retaining only those <input> elements which are
    // not the selectAll element:
      return check !== selectAll;
    });

  // if the changed element is the selectAll element:
  if (changed === selectAll) {

    // we iterate over the Array of checkboxes using
    // Array.prototype.forEach():
    checkboxes.forEach(function(check) {

      // 'check' is a reference to the current
      // check-box in the Array of check-boxes;
      // and here we update the checked property
      // of each <input> to reflect the state of
      // the selectAll <input>:
      check.checked = selectAll.checked;
    });
  } else {

    // filtering the array of checkboxes to retain only
    // those that are checked:
    var allChecked = checkboxes.filter(function(check) {
      return check.checked;

    // retrieving the length of the filtered Array and
    // comparing that length to the length of the Array
    // check-boxes in total:
    }).length === checkboxes.length;

    // updating the 'checked' property of the selectAll
    // element to true (if all 'child' checkboxes are
    // checked) or false (if not all 'child' checkboxes
    // are checked):
    selectAll.checked = allChecked;
  }

}

var tableElement = document.querySelector('table');

tableElement.addEventListener('change', checkToggle);

function checkToggle(event) {
  var changed = event.target,
    selectAll = document.getElementById('select-all'),
    checkboxes = Array.prototype.slice.call(
      this.querySelectorAll('input[type=checkbox]')
    ).filter(function(check) {
      return check !== selectAll;
    });

  if (changed === selectAll) {
    checkboxes.forEach(function(check) {
      check.checked = selectAll.checked;
    });
  } else {
    var allChecked = checkboxes.filter(function(check) {
      return check.checked;
    }).length === checkboxes.length;

    selectAll.checked = allChecked;
  }

}

var tableElement = document.querySelector('table');

tableElement.addEventListener('change', checkToggle);

<div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;">
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr class="w3-gray" style="width:100%">
      <th>
        <input id="select-all" class="w3-check w3-left" type="checkbox">
        <span>User name</span></th>
      <th>User Id</th>
      <th>Designation</th>
      <th>Phone No</th>
      <th>Address</th>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
  </table>
</div>

JS Fiddle demo.

References:

• JavaScript:
  • Array.prototype.filter().
  • Array.prototype.forEach().
  • Array.prototype.slice().
  • document.getElementById().
  • document.querySelectorAll().
  • Event Object.
  • EventTarget.addEventListener().
  • Function.prototype.call().
• jQuery:
  • filter().
  • find().
  • not().
  • on().
  • prop().

Answer 2

Do your stuff in on change of child checkbox.

$('.checkbox').change(function(){
   if($(this).prop("checked") == false){
   $('#select-all').prop('checked', false);
   }
}

Answer 3

You can give class for child checkbox and check condition for checked unchecked.

$('#checkall').on('change', function() {
  $('.test:checkbox').prop('checked', $(this).is(":checked"));
});
$('.test').on('change', function() {
  if (!$(this).is(':checked')) {
    $('.test').prop('checked', false);
    $('#checkall').prop('checked', false);
  }
  if ($('.test:checked').length === 1) {
    $('.test').prop('checked', false);
    $('#checkall').prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />Check all
<input type="checkbox" class="test" />1
<input type="checkbox" class="test" />2
<input type="checkbox" class="test" />3
<input type="checkbox" class="test" />4

Answer 4

To uncheck select-all when user uncheck any checkbox try below code.

$('.checkbox').click(function(){
   if($(this).prop("checked") == false){
   $('#select-all').prop('checked', false);
   }
}