Components

Checkbox Select All

GitHub

A Stimulus controller for managing checkbox lists.

Video Tutorial

Chris Oliver from GoRails has released a presentation video on how to use this package with a real life example with Ruby on Rails.

👉 Take a look: Bulk Operations in Rails

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/checkbox-select-all

  2. Register the controller in your application

    app/javascript/controllers/index.js
    import { Application } from '@hotwired/stimulus'
import CheckboxSelectAll from '@stimulus-components/checkbox-select-all'

const application = Application.start()
application.register('checkbox-select-all', CheckboxSelectAll)

Example

Checkbox Select All

Usage

Without Rails

app/views/index.html.erb
<table data-controller="checkbox-select-all">
  <tbody>
    <tr>
      <td class="block">
        <label>
          <input type="checkbox" data-checkbox-select-all-target="checkboxAll" />
          <span>Select All / Deselect All</span>
        </label>
      </td>

      <td class="block">
        <label>
          <input type="checkbox" data-checkbox-select-all-target="checkbox" value="1" />
          <span>Team 1</span>
        </label>
      </td>

      <td class="block">
        <label>
          <input type="checkbox" data-checkbox-select-all-target="checkbox" checked="checked" value="2" />
          <span>Team 2</span>
        </label>
      </td>

      <td class="block">
        <label>
          <input type="checkbox" data-checkbox-select-all-target="checkbox" value="3" />
          <span>Team 3</span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

With Rails

In your models:

app/models/user.rb
class User < ApplicationRecord
  has_many :teams
end
app/models/team.rb
class Team < ApplicationRecord
  belongs_to :user
end

In your controller:

app/controllers/users_controller.rb
class UsersController < ApplicationController
  def update
    if user.update(user_params)
      redirect_to users_path
    else
      render :edit
    end
  end

  private

  def user_params
    params
      .require(:user)
       .permit(
         team_ids: []
       )
  end
end
app/views/index.html
<%= form_with model: @user, data: { controller: 'checkbox-select-all' } do |f| %>
  <label>
    <input type="checkbox" data-checkbox-select-all-target="checkboxAll" />
    <span>Select All / Deselect All</span>
  </label>

  <%= f.collection_check_boxes :team_ids, Team.all, :id, :name do |b| %>
    <%= b.label do %>
      <%= b.check_box data: { checkbox_select_all_target: 'checkbox' } %>
      <%= b.text %>
    <% end %>
  <% end %>
<% end %>

Configuration

AttributeDefaultDescriptionOptional
data-checkbox-select-all-disable-indeterminate-valuefalseDisable the indeterminate state.✅

Extending Controller

You can use inheritance to extend the functionality of any Stimulus component:

app/javascript/controllers/checkbox_select_all_controller.js
import CheckboxSelectAll from "@stimulus-components/checkbox-select-all"

export default class extends CheckboxSelectAll {
  connect() {
    super.connect()
    console.log("Do what you want here.")

    // Get all checked checkboxes
    this.checked

    // Get all unchecked checkboxes
    this.unchecked
  }
}

This controller will automatically have access to targets defined in the parent class.

If you override the connect, disconnect or any other methods from the parent, you'll want to call super.method() to make sure the parent functionality is executed.