https://www.aragon.es/o/aragon-theme/js/aria/checkBoxes.js

1export function CheckBox(aria) {
2
3  class CheckBox {
4    constructor(domNode) {
5      this.rootEl = domNode;
6      this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
7        item.addEventListener('click', this.toggleConditional.bind(this))
8        this.toggleConditionalInit(item)
9      })
10
11      this.rootEl.querySelectorAll('.c-checkboxes__indeterminate-active').forEach(item => {
12        this.toggleIndeterminate(item, true)
13      })
14    }
15
16    toggleConditionalInit(item) {
17      const getInput = item.querySelector('input');
18      if(getInput.checked) {
19        item.classList.remove('c-checkboxes__conditional-hidden');
20        item.classList.add('c-checkboxes__conditional-active');
21      } else {
22        item.classList.add('c-checkboxes__conditional-hidden');
23        item.classList.remove('c-checkboxes__conditional-active');
24      }
25    }
26
27    toggleConditional(event) {
28      const { target: { nodeName, checked, type }, target } = event
29      if(nodeName === 'INPUT' && type === 'checkbox' && checked) {
30        target.parentElement.parentElement.parentElement.classList.remove('c-checkboxes__conditional-hidden');
31        target.parentElement.parentElement.parentElement.classList.add('c-checkboxes__conditional-active');
32      } else if (nodeName === 'INPUT' && type === 'checkbox' && !checked) {
33        target.parentElement.parentElement.parentElement.classList.add('c-checkboxes__conditional-hidden');
34        target.parentElement.parentElement.parentElement.classList.remove('c-checkboxes__conditional-active');
35      }
36    }
37
38    toggleIndeterminate(event) {
39      const selectInput = event.querySelector('input');
40      selectInput.readOnly = true
41      selectInput.indeterminate = true
42    }
43  }
44
45  const checkBoxesElements = document.querySelectorAll('[data-module="c-checkboxes"]');
46  checkBoxesElements.forEach((checkBoxElement) => {
47    if (checkBoxElement.querySelector('.c-checkboxes__conditional') || checkBoxElement.querySelector('.c-checkboxes__indeterminate-active')) {
48      new CheckBox(checkBoxElement);
49    }
50  });
51
52}