Execute script if 3 checkboxes are selected and also if less then 3 are selected

by

I am trying to get code executed if three checkboxes are selected (any) and get an alert if the three checkboxes aren’t selected anymore.

The checkboxes are variable, now there only 3x but if I am done with the site there can be up to 30 checkboxes with variable ids, so I cannot target them directly with an id.

window.addEventListener('load', function() {
  var checkboxes = jQuery('.berocket_single_filter_widget input[type=checkbox]');
  checkboxes.addEventListener('change', function() {
    alert("Test");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_column et_pb_column_4_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough et-last-child">


  <div class="berocket_single_filter_widget berocket_single_filter_widget_104" data-id="104" style="">
    <div class="bapf_sfilter bapf_ckbox bapf_asradio bapf_ckbox_square" data-op="OR" data-taxonomy="pa_geschlecht" data-name="Geschlecht" id="bapf_3">
      <div class="bapf_head">
        <h3>Geschlecht</h3>
      </div>
      <div class="bapf_body">
        <ul>
          <li class="checked"><input data-name="Mann" id="bapf_3_35" type="checkbox" value="35" checked="checked"><label for="bapf_3_35">Mann</label></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="berocket_single_filter_widget berocket_single_filter_widget_111" data-id="111" style="">
    <div class="bapf_sfilter bapf_ckbox bapf_ckbox_square" data-op="AND" data-taxonomy="product_cat" data-name="Hersteller" id="bapf_4">
      <div class="bapf_head">
        <h3>Hersteller</h3>
      </div>
      <div class="bapf_body">
        <ul>
          <li class="checked"><input data-name="Tom Ford" id="bapf_4_30" type="checkbox" value="30" checked="checked"><label for="bapf_4_30">Tom Ford</label>
            <ul>
              <li class="checked"><input data-name="Tabacco Vanille" id="bapf_4_68" type="checkbox" value="68" checked="checked"><label for="bapf_4_68">Tabacco Vanille</label></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

25 thoughts on “Execute script if 3 checkboxes are selected and also if less then 3 are selected”

Leave a Comment