Skip to main content

SelectAllController

The SelectAllController is a Stimulus controller. This means that it is a JavaScript class which controls one small bit of functionality. When connected to a "Select All" checkbox (with data-select-all-target="selectAllBox") and any number of normal checkboxes (with data-select-all-target="singleBox") it will do the following:

  • Select all singleBoxes when selectAllBox is selected
  • De-select all singleBoxes when selectAllBox is de-selected
  • Automatically maintain the correct state (checked or unchecked) of the selectAllBox whenever the user selects a singleBox (ie: if the user selects all singleBoxes manually, the selectAllBox will automatically become selected)

This can be used inside of any element, including a table or a form.

Using SelectAllController

Register

pmacs-frontend already provides your app with the Stimulus libraries, so you can simply add this line to your application.js manifest:

// app/assets/javascripts/application.js

// All of your normal 'requires'...

stimulus.register('select-all', SelectAllController)

Connect

Stimulus controllers need to be connected to the DOM elements involved in the component. This is done by giving a DOM element a data-controller property with the name you have just registered (select-all). The DOM element you choose needs to be high enough in the DOM hierarchy that all of the relevant checkboxes are nested within it (including the selectAllBox).

<div data-controller="select-all">
  <!-- The rest of your checkboxes must be nested inside here -->
</div>

Wire Up Your Select All Box

The next step is adding the actual "Select All" box, which has the following properties:

<input type="checkbox"
       data-target="select-all.selectAllBox"
       data-action="select-all#toggleAllSingleBoxes" />

Wire Up Your Other Checkboxes

All that remains is to connect the controller to the checkboxes it is in charge of. The following data-target and data-action properties are required:

<input type="checkbox"
       data-target="select-all.singleBox"
       data-action="select-all#updateItems" />

(Optional) Enable/Disable Bulk Action Buttons

If you have any buttons that you want disabled unless some checkboxes are checked, you can simply add data-target="select-all.button", like so:

<button type="submit"
        disabled="disabled"
        data-select-all-target="button" />

Note that we have disabled this button by default, which assumes that no checkboxes are initially checked.

That's It

All together, it should look something like this:

<div data-controller="select-all">

  <!-- Select-All Box -->
  <input type="checkbox"
         data-select-all-target="selectAllBox"
         data-action="select-all#toggleAllSingleBoxes" /> Select All

  <!--  Checkbox 1  -->
  <input type="checkbox"
         data-select-all-target="singleBox"
         data-action="select-all#updateItems" /> 1

  <!--  Checkbox 2  -->
  <input type="checkbox"
         data-select-all-target="singleBox"
         data-action="select-all#updateItems" /> 2

  <!--  Submit Button  -->
  <input type="submit"
         value="Submit"
         class="btn btn-primary"
         disabled="disabled"
         data-select-all-target="button" />
</div>