@stimulus-library/controllers/dist/forms/checkbox_select_all_controller.js

A library of useful controllers for Stimulus

import { BaseController } from "@stimulus-library/utilities";
import { useCollectionEventListener, useEventListener } from "@stimulus-library/mixins";
export class CheckboxSelectAllController extends BaseController {
    get _checked() {
        return this._enabled.filter(checkbox => checkbox.checked);
    }
    get _enabled() {
        return this.checkboxTargets.filter(checkbox => !checkbox.disabled && !checkbox.readOnly);
    }
    get _unchecked() {
        return this._enabled.filter(checkbox => !checkbox.checked);
    }
    connect() {
        requestAnimationFrame(() => {
            if (!this.hasSelectAllTarget) {
                return;
            }
            useEventListener(this, this.selectAllTarget, "change", this._toggle);
            useCollectionEventListener(this, this.checkboxTargets, "change", this._refresh);
            this._refresh();
        });
    }
    _toggle(event) {
        event.preventDefault();
        const target = event.target;
        this._enabled.forEach((checkbox) => checkbox.checked = (checkbox.disabled || checkbox.readOnly) ? checkbox.checked : target.checked);
    }
    _refresh() {
        const checkboxesCount = this._enabled.length;
        const checkboxesCheckedCount = this._checked.length;
        this.selectAllTarget.checked = checkboxesCheckedCount > 0;
        this.selectAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount;
    }
}
CheckboxSelectAllController.targets = ["selectAll", "checkbox"];