如果取消选中任何子复选框，如何取消选中“全选”复选框

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

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);
   }
}

Answer 2

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 3

Do your stuff in on change of child checkbox.

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

Answer 4

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() .