How to Select/Deselect All Checkboxes Using Javascript | js-SelectAllCheckbox

SelectAllCheckbox is a JavaScript library that makes it easy to create Select All checkboxes for groups of checkboxes. This is the Vanilla JS version of the jQuery SelectAllCheckbox plugin that provides Check All and Deselect all functions for checkbox sets.

How to make use of it:

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

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

2. Create a Select All checkbox in 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 move the following parameters to the CheckboxGroup().

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

Check & Uncheck All Checkboxes With A Single Click, HTML Checkbox Check All Uncheck All, SelectAllCheckbox Github

See Demo And Download