Select All Checkboxes In JavaScript – check-all.js

Category: Form , Javascript , Recommended | November 13, 2022
Author:github
Views Total:136 views
Official Page:Go to website
Last Update:November 13, 2022
License:MIT

Preview:

Select All Checkboxes In JavaScript – check-all.js

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

You Might Be Interested In:


Leave a Reply