Return true if at least one of the checkbox is checked otherwise return false

Question

I have four checkboxes and I want to validate if at least one of the checkboxes is checked. If one of the checkboxes is checked then return true otherwise return false. Below is what I have tried but it always returns false. I just don't know where I was wrong. I want to try it with simple for loop.

    const services = document.getElementsByClassName("services"); 
    function validate() {
      alert(validateServicesCheckbox(services));
    }
    function validateServicesCheckbox(cb) {
        for (let i = 0; i<cb.length; i++) {
          if (cb[i].checked === false) { 
            return false;
          } 
        }
        return true;
     }

<div class="row">
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox1" value="option1">
                      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox2" value="option2">
                      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox3" value="option3">
                      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox4" value="option4">
                      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
                    </div>
                  </div>
                  
                </div>
<div> <button onclick="validate()"> Click me</button></div>

Answer 1

Here is the simple solution to check whether at least one checkbox is checked or not in your HTML page:

function validate() {
  var allcheckboxes = document.querySelectorAll('input[type="checkbox"]');
  var isCheckedAny = Array.prototype.slice.call(allcheckboxes).some(x => x.checked);
  console.log(isCheckedAny);
}

<div class="row">
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox1" value="option1">
      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
    </div>
  </div>
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox2" value="option2">
      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
    </div>
  </div>
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox3" value="option3">
      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
    </div>
  </div>
  <div class="col-md-3">
    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
      <input class="custom-control-input services" type="checkbox" id="inlineCheckbox4" value="option4">
      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
    </div>
  </div>

</div>
<div> <button onclick="validate()"> Click me</button></div>

Some explanation about javascript code used here:-

Array.prototype.slice.call() serves as a quick way to turn any array-like object into a true array.

The some() method checks if any of the elements in an array pass a test (provided as a function).

• The some() method executes the function once for each element present in the array:

• If it finds an array element where the function returns a true value, some() returns true (and does not check the remaining values) Otherwise, it returns false

I hope this can help!

Answer 2

For conditions that sounds like 'at least one' checks should be inverted: in loop check that checbox is checked, and return true, otherwise - if all the checkboxes unchecked - return false

const services = document.getElementsByClassName("services"); 
    function validate() {
      alert(validateServicesCheckbox(services));
    }
    function validateServicesCheckbox(cb) {
      for (let i = 0; i<cb.length; i++) {          
            if(cb[i].checked) {
              return true
            }
        }
        return false;
     }

<div class="row">
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox1" value="option1">
                      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox2" value="option2">
                      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox3" value="option3">
                      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox4" value="option4">
                      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
                    </div>
                  </div>
                  
                </div>
<div> <button onclick="validate()"> Click me</button></div>

Answer 3

You can use querSelectorAll and before start loop initialize as false if u find checked make it true

const services = document.querySelectorAll(".services"); 
    function validate() {
      alert(validateServicesCheckbox(services));
    }
    function validateServicesCheckbox(cb) {
       var result=false;
        for (let i = 0; i<cb.length; i++) {
          if (cb[i].checked ){ 
            result= true;
          } 
        }
        return result;
     }

<div class="row">
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox1" value="option1">
                      <label class="custom-control-label" for="inlineCheckbox1">SØPPEL</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-down">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox2" value="option2">
                      <label class="custom-control-label" for="inlineCheckbox2">FLYTTE</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-right">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox3" value="option3">
                      <label class="custom-control-label" for="inlineCheckbox3">BUD</label>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="custom-control custom-checkbox custom-control-inline checkbox-xl" data-aos="fade-up">
                      <input class="custom-control-input services"  type="checkbox" id="inlineCheckbox4" value="option4">
                      <label class="custom-control-label" for="inlineCheckbox4">RENHOLD</label>
                    </div>
                  </div>
                  
                </div>
<div> <button onclick="validate()"> Click me</button></div>