https://railsblocks.com/assets/controllers/conditional_field_contr…3c2fc61c70a8304ede19eb49fdd335f3d3035a63.js

1import { Controller } from "@hotwired/stimulus";
2
3// Connects to data-controller="conditional-field"
4export default class extends Controller {
5  static targets = ["conditionalField"];
6  static values = {
7    fieldMap: Object, // Maps input values to their corresponding conditional field targets
8  };
9
10  connect() {
11    this.updateVisibility();
12  }
13
14  // Called when an input (radio or checkbox) changes
15  change(event) {
16    this.updateVisibility();
17  }
18
19  updateVisibility() {
20    // Find all checked inputs (works for both radios and checkboxes)
21    const checkedInputs = this.element.querySelectorAll("input:checked");
22    const selectedValues = Array.from(checkedInputs).map((input) => input.value);
23
24    // Hide all conditional fields first
25    this.conditionalFieldTargets.forEach((field) => {
26      field.classList.add("hidden");
27    });
28
29    // Show the relevant fields based on selected values
30    selectedValues.forEach((selectedValue) => {
31      if (this.fieldMapValue[selectedValue]) {
32        const targetFieldName = this.fieldMapValue[selectedValue];
33        const targetField = this.conditionalFieldTargets.find(
34          (field) => field.dataset.conditionalField === targetFieldName,
35        );
36
37        if (targetField) {
38          targetField.classList.remove("hidden");
39        }
40      }
41    });
42  }
43};