checking whether or not any checkbox input is checked from array of input

Question

I have a node list of chechbox inputs

const searchSizeSelectionInputs = document.querySelectorAll(
  ".sizeHolderFilter > input")

I have written a function to check whether or not any checkbox is checked or not, the function is

const activationChecker = ()=>{
  if (
    availabilityInStoreOptions[0].classList.contains("activeSortOptionSP") ||
    availabilityInStoreOptions[1].classList.contains("activeSortOptionSP")
  ) {
    isAvailabilityInStorActive = true;
  }
  if(  !availabilityInStoreOptions[0].classList.contains("activeSortOptionSP") &&
    !availabilityInStoreOptions[1].classList.contains("activeSortOptionSP")) {
    isAvailabilityInStorActive = false;
  }
  searchSizeSelectionInputs.forEach(input => {
    if (input.checked) {
      isSizeInputChecked = true;
    } else {
      let isSizeInputChecked = false;
    }
  });
  searchColorSelectionInputs.forEach(input => {
    if (input.checked) {
      isColorInputChecked = true;
    } else {
      let isColorInputChecked = false;
    }
  });

};

the thing is, when I check the result of isSizeInputChecked or isColorInputChecked it gives me faulty answers, for example when I check the checkbox it gives me true and when I uncheck the checkbox it still gives me true, I tested the same code on one single object and it works beautifully,I believe I do have a problem on doing this on a node list. This must be the wrong way:

searchSizeSelectionInputs.forEach(input => {
    if (input.checked) {
      isSizeInputChecked = true;
    } else {
      let isSizeInputChecked = false;
    }

How can I check if any checkbox is checked or not any of them is checked?

dude, I tried to make the question as clear as I could,sorry anyway. — AbeIsWatching
– AbeIsWatching, Commented Feb 10, 2020 at 19:07
why is there not a let on the if (input.checked) { isSizeInputChecked = true;... test, is it a global variable while in the other case it is a local variable? it's really not clear — Mister Jojo
– Mister Jojo, Commented Feb 10, 2020 at 19:55
this is not the point, a local var doesn't not reassign a global — Mister Jojo
– Mister Jojo, Commented Feb 10, 2020 at 22:09

vishnu sandhireddy · Accepted Answer · 2020-02-10 19:03:06Z

1

function getCheckedData() {
  let atleastOneChecked=Array.from(document.querySelectorAll('.checkbox'))
    .some(
      function(inputCheckbox) {
        return inputCheckbox.checked;
    }
 
);
let allChecked=Array.from(document.querySelectorAll('.checkbox'))
    .every(
      function(inputCheckbox) {
        return inputCheckbox.checked;
    }
 
);
console.log('atleastOneChecked',atleastOneChecked);
console.log('allChekecked',allChecked);

}

<input type="checkbox" class='checkbox'>
<input type="checkbox" class='checkbox'>

<button onclick="getCheckedData()">Get checked data</button>

The document.querySelectorAll returns a NodeList and it is not an array. We have to convert node list into an array using Array.from and use the some function from Array to get atleast one of the element is checked or not.

answered Feb 10, 2020 at 19:03

vishnu sandhireddy

1,1761 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AbeIsWatching Over a year ago

Thanks a lot, dude.have a beautiful day or night.

Collectives™ on Stack Overflow

checking whether or not any checkbox input is checked from array of input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related