How do I grab an id element in a form that is constructed as an array in Javascript?

Question

I have this in a form:

<input class="form-check-input" type="checkbox" id="pago[1][8819]">
<input class="form-check-input" type="checkbox" id="pago[2][5241]">
<input class="form-check-input" type="checkbox" id="pago[3][8541]">

How do I grab these in order to do a loop?

I've tried:

const pago = document.querySelector('#pago');

for (let i = 0; i < pago.length; i++) {
  const element = array[i];
  console.log(element);
}

But It does not work (returns NULL).

Edit:

I've read this reply here , but in this case I shouldn't need to use regex to resolve this. I think it should get sorted with a loop of some kind. In that question, the problem was to find elements that have certain strings in their names, where in this case, I need to loop through numbers.

Answer 1

You can try using attribute starts with ( [attr^=value] ) selector:

 const pago = document.querySelectorAll('[id^=pago]'); for (let i = 0; i < pago.length; i++) { const element = pago[i]; console.log(element); }

 <input class="form-check-input" type="checkbox" id="pago[1][8819]"> <input class="form-check-input" type="checkbox" id="pago[2][5241]"> <input class="form-check-input" type="checkbox" id="pago[3][8541]">