https://www.monumenten.nl/modules/contrib/webform/js/webform.element.checkboxes.js?tluhor

1/**
2 * @file
3 * JavaScript behaviors for checkboxes.
4 */
5
6(function ($, Drupal, once) {
7  /**
8   * Adds check all or none checkboxes support.
9   *
10   * @type {Drupal~behavior}
11   *
12   * @see https://www.drupal.org/project/webform/issues/3068998
13   */
14  Drupal.behaviors.webformCheckboxesAllorNone = {
15    attach(context) {
16      $(once('webform-checkboxes-all-or-none', '[data-options-all], [data-options-none]', context))
17        .each(function () {
18          var $element = $(this);
19
20          var options_all_value = $element.data('options-all');
21          var options_none_value = $element.data('options-none');
22
23          // Get all checkboxes.
24          var $checkboxes = $element.find('input[type="checkbox"]');
25
26          // Get all options/checkboxes.
27          var $options = $checkboxes
28            .not('[value="' + options_all_value + '"]')
29            .not('[value="' + options_none_value + '"]');
30
31          // Get options all and none checkboxes.
32          var $options_all = $element
33            .find(':checkbox[value="' + options_all_value + '"]');
34          var $options_none = $element
35            .find(':checkbox[value="' + options_none_value + '"]');
36
37          // All of the above.
38          if ($options_all.length) {
39            $options_all.on('click', toggleCheckAllEventHandler);
40            if ($options_all.prop('checked')) {
41              toggleCheckAllEventHandler();
42            }
43          }
44
45          // None of the above.
46          if ($options_none.length) {
47            $options_none.on('click', toggleCheckNoneEventHandler);
48            toggleCheckNoneEventHandler();
49          }
50
51          $options.on('click', toggleCheckboxesEventHandler);
52          toggleCheckboxesEventHandler();
53
54          /**
55           * Toggle check all checkbox checked state.
56           */
57          function toggleCheckAllEventHandler() {
58            if ($options_all.prop('checked')) {
59              // Uncheck options none.
60              if ($options_none.is(':checked')) {
61                $options_none
62                  .prop('checked', false)
63                  .trigger('change', ['webform.states']);
64              }
65              // Check check all unchecked options.
66              $options.not(':checked')
67                .prop('checked', true)
68                .trigger('change', ['webform.states']);
69            }
70            else {
71              // Check uncheck all checked options.
72              $options.filter(':checked')
73                .prop('checked', false)
74                .trigger('change', ['webform.states']);
75            }
76          }
77
78          /**
79           * Toggle check none checkbox checked state.
80           */
81          function toggleCheckNoneEventHandler() {
82            if ($options_none.prop('checked')) {
83              $checkboxes
84                .not('[value="' + options_none_value + '"]')
85                .filter(':checked')
86                .prop('checked', false)
87                .trigger('change', ['webform.states']);
88            }
89          }
90
91          /**
92           * Toggle check all checkbox checked state.
93           */
94          function toggleCheckboxesEventHandler() {
95            var isAllChecked = ($options.filter(':checked').length === $options.length);
96            if ($options_all.length
97              && $options_all.prop('checked') !== isAllChecked) {
98              $options_all
99                .prop('checked', isAllChecked)
100                .trigger('change', ['webform.states']);
101            }
102            var isOneChecked = $options.is(':checked');
103            if ($options_none.length
104              && isOneChecked) {
105              $options_none
106                .prop('checked', false)
107                .trigger('change', ['webform.states']);
108            }
109          }
110        });
111    }
112  };
113
114})(jQuery, Drupal, once);