Two-level JQuery check and uncheck all child checkboxes of a parent checkbox

Overview

I ran into a problem where I needed a reusable script to check and uncheck all checkboxes under a parent checkbox. The checkboxes were built dynamically, and I did not want to hard-code the logic or generate the client side script on the server.

Existing Solutions I Found

I found a couple solutions out there, including the following two:

http://www.dotnetfunda.com/articles/article894-checkuncheck-all-checkboxes-with-jquery-.aspx

http://briancray.com/2009/08/06/check-all-jquery-javascript/

I really liked Brian Cray's solution. However, a downfall was that it did not handle the case where you checked or unchecked all of the child checkboxes and it automatically checked or unchecked the parent checkbox. The first solution did handle that correctly. However, it was using server side script to get the client id of the checkboxes (due to .NET web forms tacking on prefixes to control names).

jQuery Source Code

  1. $(document).ready(
  2. function() {
  3. //clicking the parent checkbox should check or uncheck all child checkboxes
  4. $(".parentCheckBox").click(
  5. function() {
  6. $(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);
  7. }
  8. );
  9. //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
  10. $('.childCheckBox').click(
  11. function() {
  12. if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
  13. $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
  14. if (this.checked == true) {
  15. var flag = true;
  16. $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
  17. function() {
  18. if (this.checked == false)
  19. flag = false;
  20. }
  21. );
  22. $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
  23. }
  24. }
  25. );
  26. }
  27. );

Html Source Code

  1. <input type="checkbox" class="parentCheckBox" /> Parent 1<br />
  2. <input type="checkbox" class="childCheckBox" /> Child 1-1<br />
  3. <input type="checkbox" class="childCheckBox" /> Child 1-2<br />
  4. <input type="checkbox" class="childCheckBox" /> Child 1-3<br />
  5. <input type="checkbox" class="childCheckBox" /> Child 1-4<br />
  6. <input type="checkbox" class="childCheckBox" /> Child 1-5<br />
  7. <input type="checkbox" class="parentCheckBox" /> Parent 2<br />
  8. <input type="checkbox" class="childCheckBox" /> Child 2-1<br />
  9. <input type="checkbox" class="childCheckBox" /> Child 2-2<br />
  10. <input type="checkbox" class="childCheckBox" /> Child 2-3<br />
  11. <input type="checkbox" class="childCheckBox" /> Child 2-4<br />
  12. <input type="checkbox" class="childCheckBox" /> Child 2-5<br />
  13. <input type="checkbox" class="parentCheckBox" /> Parent 3<br />
  14. <input type="checkbox" class="childCheckBox" /> Child 3-1<br />
  15. <input type="checkbox" class="childCheckBox" /> Child 3-2<br />
  16. <input type="checkbox" class="childCheckBox" /> Child 3-3<br />
  17. <input type="checkbox" class="childCheckBox" /> Child 3-4<br />
  18. <input type="checkbox" class="childCheckBox" /> Child 3-5<br />

Live Example of My Solution

Parent 1
     Child 1-1
     Child 1-2
     Child 1-3
     Child 1-4
     Child 1-5
Parent 2
     Child 2-1
     Child 2-2
     Child 2-3
     Child 2-4
     Child 2-5
Parent 3
     Child 3-1
     Child 3-2
     Child 3-3
     Child 3-4
     Child 3-5

How To Use My Modified Solution

1. Add a reference to jQuery. I used 1.4.2.

2. Download the script and add a reference to it.

3. Each group of checkboxes must be in their own <fieldset>.

4. Parent checkboxes must have the "parentCheckBox" class.

5. Child checkboxes must have the "childCheckBox" class.