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>

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

  1. You can get all your checkboxes in JS. Note that the checkboxes have the same name. They are all in one list because of [] after the name. You can use a class as well if you want. Important is that they all have it the same.

    After that you listen for change event on every checkbox. If some checkbox was toggled, then run through the array of checkboxes and check if they all are checked. If at least one isn’t, then your function isn’t executed.

    Here is a plain JS example, since you didn’t mention jQuery in your question at first.

    let checkboxes = document.querySelectorAll('input[name="something[]"]');

checkboxes.forEach((cb) => {
  cb.addEventListener("change", handleCheckbox);
});

function handleCheckbox() {
  let allChecked = true;
  checkboxes.forEach((cb) => {
    if (!cb.checked) {
      allChecked = false;
    }
  });
  if (allChecked) {
    yourFunction();
  }
}

function yourFunction() {
  alert("Hello Stackoverflow!");
}
    <p>Check them all!</p>
<input type="checkbox" name="something[]">
<input type="checkbox" name="something[]">
<input type="checkbox" name="something[]">
<input type="checkbox" name="something[]">
    Reply

Leave a Comment