Select All Checkboxes In JavaScript – check-all.js

Preview:

Description:

check-all.js is a pure JavaScript plugin for the ‘check all’ functionality that enables a checkbox to select/unselect all checkboxes in a group.

Also supports the indeterminate checkbox.

How to use it:

1. Install and import the check-all.js.

// ES Module
import checkAll from '@github/check-all'

<script type="module">
  import checkAll from './dist/check-all.esm.js'
</script>

2. Add your checkboxes together with the ‘Check All’ checkbox into a container with the ‘data-check-all-container’ attribute.

<div data-check-all-container>
  <label><input type="checkbox" data-check-all> Check All</label>
  <label><input type="checkbox" data-check-all-item> JavaScript </label>
  <label><input type="checkbox" data-check-all-item> HTML5 </label>
  <label><input type="checkbox" data-check-all-item> CSS3 </label>
  <label><input type="checkbox" data-check-all-item> jQuery </label>
</div>

3. You can also create a counter that displays the number of checkboxes has been selected.

<div data-check-all-container>
  Count: <span data-check-all-count>0</span>
  <label><input type="checkbox" data-check-all> Check All</label>
  <label><input type="checkbox" data-check-all-item> JavaScript </label>
  <label><input type="checkbox" data-check-all-item> HTML5 </label>
  <label><input type="checkbox" data-check-all-item> CSS3 </label>
  <label><input type="checkbox" data-check-all-item> jQuery </label>
</div>

4. Activate the ‘Check All’ functionality.

checkAll(document.querySelector('[data-check-all-container]'))

Changelog:

11/13/2022

• Updated to v0.4.0