ihk24/storybook/stories/components/checkbox-group/checkbox-group.js

import $ from "jquery";

class IHKCheckboxGroup {
  constructor(wrapper) {
    this.wrapper = wrapper.addClass('initiated');
    this.label = wrapper.find('label.acc');
    this.toggle = this.label.find('a');
    this.checkbox = this.label.prev('input[type="checkbox"]');
    this.subs = wrapper.find('.checkbox-wrapper');

    this.initToggle();
    this.initChangeListener();
  }

  initChangeListener() {
    this.checkbox.on('change', (e) => {
      const isChecked = $(e.currentTarget).removeClass('half-checked').prop('checked');
      this.subs.find('input[type="checkbox"]').prop('checked', isChecked);
    })

    this.subs.find('input[type="checkbox"]').on('change', () => {
      this.checkSelection();
    })

    this.checkSelection();
  }

  initToggle() {
    this.toggle.on('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      this.label.toggleClass('open');
      this.subs.stop().slideToggle(300, 'swing');
    })
  }

  checkSelection() {
    const checked = this.subs.find('input[type="checkbox"]:checked').length;
    const unchecked = this.subs.find('input[type="checkbox"]:not(:checked)').length;

    if (checked === 0) {
      this.checkbox.prop('checked', false).removeClass('half-checked');
    }
    else if (unchecked === 0) {
      this.checkbox.prop('checked', true).removeClass('half-checked');
    }
    else {
      this.checkbox.prop('checked', false).addClass('half-checked');
    }
  }
}

export default IHKCheckboxGroup;

$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
  $('.checkbox-group:not(.initiated)').each(() => {
    new IHKCheckboxGroup($(this));
  });
});