How to get the unchecked checkboxes in a js?

February 8, 2023

I have a 5 checkboxes, Where all of them were checked.

The maximum 2 should be unchecked, with all the 3 checked.

<div id="excludedNumbers">
  <div class="form-group">
    <div class=" form-check">
        <input class="form-check-input" checked type="checkbox" value="0" id="add0">
        <label class="form-check-label" for="add0">0</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="1" id="add1">
         <label class="form-check-label" for="add1">1</label>
     </div>
     <div class="form-check">
        <input class="form-check-input" checked type="checkbox" value="2" id="add2">
        <label class="form-check-label" for="add2">2</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="3" id="add3">
         <label class="form-check-label" for="add3">3</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="4" id="add4">
         <label class="form-check-label" for="add4">4</label>
     </div>
      <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="5" id="add5">
         <label class="form-check-label" for="add5">5</label>
     </div>

I need to set an alert, if the user unchecks more than 2 digits.

var checkBoxesEnabled =document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
   checkBoxesEnabled[i].addEventListener('click', function () {
   var uncheckedcount = 0;
       for (var i = 0; i < checkBoxesEnabled.length; i++) {
          if(checkBoxesEnabled[i].checked === false > limit){
             alert('You cannot disable more than 2');
         }
      }
  });
}

It didnt work, not sure what was wrong

How could I get the alert, if more than 2 checkboxes were unchecked?

could someone please help?

>Solution :

You need to increase the counter each time you find a checked checkbox and then compare it with the value of the limit variable. Raise an alert if the limit is crossed.

var checkBoxesEnabled =document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
   checkBoxesEnabled[i].addEventListener('click', function () {
   var uncheckedcount = 0;
       for (var i = 0; i < checkBoxesEnabled.length; i++) {
          if(checkBoxesEnabled[i].checked === false) uncheckedcount++;
          if (limit < uncheckedcount) {
                 alert('You cannot disable more than 2');
                 break;
          }
      }
  });
}