Foreach function that clicks on check boxes

Question

I need function to click on a range of check boxes. I do however not always know what i is. I tried a write a forEach loop, but it does not work:

This for loop works:

function check Boxes() {
  for (let i = 0; i < 249; i++) {
    document.getElementsByClassName("inventoryCbox")[i].click();

  }
}

and this is the non-working for loop. I think that maybe my syntax is wrong.

checkBoxes();
var boxes = document.getElementsByClassName("inventoryCbox");

function checkBoxes(node) {
  node.forEach(function(boxes) {
    boxes.click()
  });
}

Did you mean to write `function check Boxes() {}`, with a literal space between "check" and "Boxes"? I formatted your code, but that was there before I formatted it. — zero298, Jul 30 '19 at 13:54
[how to iterate on HTMLCollection?](https://stackoverflow.com/q/49956141/691711) — zero298, Jul 30 '19 at 13:59

Grillparzer · Answer 1 · 2019-07-30T14:21:03.057

3

This will check all the checkboxes with the class 'inventoryCbox':

document.querySelectorAll(".inventoryCbox").forEach(node => node.click())

edited Jul 30 '19 at 14:21

answered Jul 30 '19 at 13:58

Grillparzer

420
3
9

1

Forgot to remove that, thanks! (No worries about the downvote) – Grillparzer Jul 30 '19 at 14:22
Thank you SO mush for your help - this works beautifully..:) – Marina Jul 31 '19 at 11:30

T.J. Crowder · Answer 2 · 2019-07-30T14:08:23.980

node in your checkBoxes function is undefined, because you're not passing anything into the function. Also, your code has you calling checkBoxes before you assign anything to boxes. You probably meant to use boxes directly:

// This *before* `checkboxes`
var boxes = document.getElementsByClassName("inventoryCbox");
checkBoxes();

function checkBoxes() { // <== No parameter
  boxes.forEach(function(box) {
//^^^^^                  ^^^
    box.click()
//  ^^^
  });
}

But that still has a problem: The HTMLCollection returned by getElementsByClassName doesn't have forEach reliably cross-browser. (The NodeList returned by querySelectorAll has it on modern browsers, but not HTMLCollection.)

You can add it if you like:

if (typeof HTMLCollection !== "undefined" &&
    HTMLCollection.prototype &&
    !HTMLCollection.prototype.forEach) {
    // Yes, direct assignment is fine here, no need for `Object.defineProperty`
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
}

Then the updated code above would work.

Or stick with your existing loop, or use Array.prototype.forEach directly:

function checkBoxes() { // <== No parameter
  Array.prototype.forEach.call(boxes, function(box) {
    box.click()
  });
}

My answer here goes into details for adding not just forEach but iterability to HTMLCollection (and NodeList in environments that haven't implemented iterability for NodeList yet).

Thank you so mush for taking the time to write this out so clearly TJ. Much appreciated! I tried to give a upvote but have not yet been active enough here at Stackoverflow. — Marina, Aug 01 '19 at 06:17

score -1 · Answer 3 · answered Jul 30 '19 at 13:57

-1

If you want to click on all elements selected by some class, you can use this example

var els = document.querySelectorAll('.inventoryCbox'); 
for (i = 0; i < els.length; ++i) {
     els[i].click();
};

answered Jul 30 '19 at 13:57

OMANSAK

1,066
1
12
30

Foreach function that clicks on check boxes

3 Answers3