Select All
Use a checkbox to check or uncheck all other checkboxes in a group.
Usage
Wrap an <input type="checkbox"> in a <kelp-select-all> element, and add a [target] attribute whose value is the selector string for the checkboxes it should control.
<fieldset>
<legend>What's your favorite Pixar movie?</legend>
<kelp-select-all target="#pixar-movies [type='checkbox']">
<label for="select-all">
<input type="checkbox" id="select-all">
Select All
</label>
</kelp-select-all>
<div id="pixar-movies">
<label for="up">
<input type="checkbox" id="up" name="movie" value="up">
Up!
</label>
<label for="wall-e">
<input type="checkbox" id="wall-e" name="movie" value="wall-e">
WALL-E
</label>
<label for="toy-story">
<input type="checkbox" id="toy-story" name="movie" value="toy-story">
Toy Story
</label>
</div>
</fieldset>Options
If the controlling checkbox has the [checked] attribute, all of the checkboxes is controls will be checked by default as well when the component instantiates.
<kelp-select-all target="#pixar-movies [type='checkbox']">
<label for="select-all">
<input type="checkbox" id="select-all" checked>
Select All
</label>
</kelp-select-all>Events
The <kelp-select-all> element emits a few events.
kelp-select-all:readyemits when the component is instantiated.kelp-select-all:toggleemits after the checked state for the controlled checkboxes is updated.
The event.detail property for the kelp-select-all:toggle event includes the controlling checkbox element, the controlled fields, and an isChecked property that’s true if the items were checked, and false if they were unchecked.
document.addEventListener('kelp-select-all:ready', (event) => {
console.log('ready:', event.target);
});
document.addEventListener('kelp-select-all:toggle', (event) => {
console.log(`The checkboxes were ${event.detail.isChecked ? 'checked' : 'unchecked'}`);
});
Methods
While web components are self-instantiating, the <kelp-select-all> element can be manually initialized with the .init() method if it fails for some reason.
const selectAll = document.querySelector('kelp-select-all');
selectAll.init();