Press "Enter" to skip to content

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

Official Website(kloverde): Click Here

This superior jQuery/javascript plugin is developed by kloverde. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.