Select All Checkboxes In JavaScript – check-all.js

Category: Form , Javascript , Recommended | September 10, 2018
Author: github
Views Total: 953
Official Page: Go to website
Last Update: September 10, 2018
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:

Download and import the check-all.js.

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

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>

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>

Activate the ‘Check All’ functionality.

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

You Might Be Interested In:


Leave a Reply