Check All Controller

Check All Controller is a Stimulus controller for checking and unchecking a set of checkboxes.

Targets

Indicated by data-checkall-target attribute.

Target Element(s) Description
all input[type="checkbox"]
The checkbox that will check or uncheck all of the other checkboxes.
checkbox input[type="checkbox"]
The checkboxes that will be checked or unchecked when the "all" checkbox is checked or unchecked.

Attributes

HTML Attributes

These are standard HTML attributes (with no prefix) used by Table Filter.

Attribute Element(s) Default Value(s) Description
aria-busy (root element)
false true
false
The controller will set this to true any time it is checking or unchecking the checkboxes.
You can use the value in your CSS to indicate that work is in progress.

data- Attributes

All of these attributes are prefixed with "data-" in the attribute name.

Attribute Element(s) Default Value(s) Description
controller (any)
checkall This attribute provides the checkall functionality.
action (any)
input[type="checkbox"]
change->checkall#toggleAll (string) Check All will add this to any "all" target that doesn't have an action.
This is what tells Stimulus to take action, but you need not add this yourself unless you want to change the way it works for some reason.

Events

checkall: Events

These are custom events that the controller will fire when it takes certain actions.

All of these events are prefixed by "checkall:".

Event Parameters Description
initialized Called any time that the controller is initialized.
connected Called any time that the controller is connected.
disconnected Called any time that the controller is disconnected.
toggling Called before that the controller is about to check or uncheck the checkboxes.
toggled Called after the controller is has to checked or unchecked the checkboxes.

Methods

While it is recommended to use the controller via the attributes listed above, the following methods can be called directly if needed.

Method Returns Arguments Event(s) Description
toggleAll

Toggles all "checkbox" targets to match the checked state of the "all" target.

checkAll

Checks the "All" target and all "checkbox" targets.

uncheckAll

Unchecks the "All" target and all "checkbox" targets.