Select All snippet

check_all_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "dependee", "dependant" ]

  connect() {
    this.#checkDependee()
  }

  check({ target }) {
    target === this.dependeeTarget ? this.#checkDependants() : this.#checkDependee()
  }

  #checkDependants() {
    this.dependantTargets.forEach(e => e.checked = this.dependeeTarget.checked)
  }

  #checkDependee() {
    this.dependeeTarget.checked = this.allChecked
    this.dependeeTarget.indeterminate = this.indeterminate
  }

  get indeterminate() {
    return this.atLeastOneChecked && !this.allChecked
  }

  get atLeastOneChecked() {
    return this.dependantTargets.some(e => e.checked)
  }

  get allChecked() {
    return this.dependantTargets.every(e => e.checked)
  }
}

notification.html.erb

<fieldset class="flex flex-col gap-half text-sm" data-controller="check-all">
  <legend class="sr-only">Notifications</legend>
  
  <div class="flex items-center gap">
    <%= check_box_tag :check_all, class: "checkbox", data: { action: "check-all#check", check_all_target: "dependee" } %>
    <%= label_tag :check_all, "Check all" %>
  </div>
  
  <div class="flex items-center gap">
    <%= check_box_tag :notify_via_email, class: "checkbox", data: { action: "check-all#check", check_all_target: "dependant" } %>
    <%= label_tag :notify_via_email, "Notify via email" %>
  </div>
  
  <div class="flex items-center gap">
    <%= check_box_tag :notify_via_sms, class: "checkbox", data: { action: "check-all#check", check_all_target: "dependant" } %>
    <%= label_tag :notify_via_sms, "Notify via SMS" %>
  </div>
  
  <div class="flex items-center gap">
    <%= check_box_tag :notify_via_telegram, class: "checkbox", data: { action: "check-all#check", check_all_target: "dependant" } %>
    <%= label_tag :notify_via_telegram, "Notify via telegram" %>
  </div>
</fieldset>

Source: https://x.com/lazaronixon/status/1842083299126313017

zbRmA2SLgZCY4DbM.mp4