Check all JS

import CheckAll from "@natachah/vanilla-frontend/js/_check-all"

Syntax

The check all component make you able to toggle a checkbox in relation of others.

The value of the parent checkbox must be the name of the children.

html

<input type="checkbox" id="checkboxAll" name="all" value="check[]">
<label for="checkboxAll">Check all</label>
<fieldset>
    <legend>Choices</legend>
    <input type="checkbox" id="checkboxA" name="check[]" value="a">
    <label for="checkboxA">A</label>
    <input type="checkbox" id="checkboxB" name="check[]" value="b">
    <label for="checkboxB">B</label>
    <input type="checkbox" id="checkboxC" name="check[]" value="c">
    <label for="checkboxC">C</label>
</fieldset>

js

import CheckAll from "@natachah/vanilla-frontend/js/_check-all"
const checkboxAll = document.getElementById('checkboxAll')
if (checkboxAll) new CheckAll(checkboxAll)