Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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">
    <input type="checkbox" name="check_all" id="check_all" value="1" class="checkbox" data-action="check-all#check" data-check-all-target="dependee" />
    <label for="check_all">Check all</label>
  </div>
  <div class="flex items-center gap">
    <input type="checkbox" name="notify_via_email" id="notify_via_email" value="1" class="checkbox" data-action="check-all#check" data-check-all-target="dependant" />
    <label for="notify_via_email">Notify via email</label>
  </div>
  <div class="flex items-center gap">
    <input type="checkbox" name="notify_via_sms" id="notify_via_sms" value="1" class="checkbox" data-action="check-all#check" data-check-all-target="dependant" />
    <label for="notify_via_sms">Notify via SMS</label>
  </div>
  <div class="flex items-center gap">
    <input type="checkbox" name="notify_via_telegram" id="notify_via_telegram" value="1" class="checkbox" data-action="check-all#check" data-check-all-target="dependant" />
    <label for="notify_via_telegram">Notify via telegram</label>
  </div>
</fieldset>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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)
  }
}

No notes provided.