Check & Uncheck All Checkboxes With A Single Click – SelectAllCheckbox

Preview:

Description:

This is the Vanilla JavaScript version of the jQuery SelectAllCheckbox plugin that adds check all and uncheck all functionalities to checkbox groups.

Click on the ‘master’ checkbox to select or deselect all slave checkboxes.

How to use it:

1. Insert the selectallcheckbox.js script into the document.

<script src="./src/selectallcheckbox.js"></script>

2. Create a Select All checkbox for your checkbox group.

<label class="selectAllLabel">
  <input type="checkbox" id="selectAllGroup1"/>
  Select All
</label>
<label>
  <input type="checkbox" id="group1_a" name="group1" value="1a" />
  Choice A
</label>
<label>
  <input type="checkbox" id="group1_b" name="group1" value="1b" />
  Choice B
</label>
<label>
  <input type="checkbox" id="group1_c" name="group1" value="1c" />
  Choice C
</label>

3. Initialize the library and pass the following parameters to the CheckboxGroup().

• selectAllId: The HTML “id” attribute of the checkbox that controls the group
• groupName: The HTML “name” attribute of the checkbox group
• onChangeCallback: A user-defined function to execute when a checkbox in the group changes state. The function must accept two arguments: the first is an array of the changed checkboxes as jQuery objects. The second argument is a string representing the checked state of the checkbox group: possible values are “none”, “some” and “all”.

const example = new CheckboxGroup(
      "selectAllGroup1",
      "group1",
      onChange
);

function onChange( checkboxes, checkedState ) {
  var html = "<p>Changed:<br/>";
  for( var i = 0; i < checkboxes.length; i++ ) {
     var box = checkboxes[i];
     var line = box.id + " : " + ( box.checked ? "checked" : "unchecked" ) + "<br/>";
     html += line;
  }
  html += ("</p><p>Checked state of group is: " + checkedState + "</p>");
  document.getElementById( "log" ).innerHTML = html;
}