Quick tip : Master-Child checkboxes with jQuery

Here is a code that is really often asked.

I was asked how to code a master-child checkboxes using jQuery.

The requirements were :

  1. We want a “master” checkbox that the “child” checkboxes will mimic.
  2. We want this checkbox to be cheched if all child checkboxes are checked.
  3. We want this checkbox to be unchecked if all child checkboxes are not checked anymore.

Here is what I came with (check the demo here):

HTML markup :


<label>
 <input type="checkbox" id="checkall" />
 ALL</label>
 <hr />
 <div id="checkboxes">

<label>
 <input type="checkbox" />
 test 1</label><br />
 <label>
 <input type="checkbox" />
 test 2</label><br />
 <label>
 <input type="checkbox" />
 test 3</label><br />
 <label>
 </div>

jQuery part for requirement 1 :


$("#checkall").on("change", function () {
 $('#checkboxes input[type="checkbox"]').prop("checked", $(this).is(":checked"));
 });

Set all the checkboxes inside elements with class “checkboxes” to the value of the input with id “checkall”

jQuery part for requirements 2 and 3 :


$('#checkboxes [type="checkbox"]').on("change", function () {
 $("#checkall").prop("checked", $('#checkboxes input[type="checkbox"]:checked').length === $('#checkboxes input[type="checkbox"]').length);
 });

Set the element with id “checkall” to the answer to the question “is the number of checkboxes equal to the number of checked checkboxes”

You can check the demo here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>