So I have this issue where I need to set a value to a checkbox depending on some variables.

The problem is that I encountered the next naming convention on the HTML I'll be working with:

<input id="jc_1" type="checkbox" name="jc[1]">
<input id="jc_2" type="checkbox" name="jc[2]">
<input id="jc_3" type="checkbox" name="jc[3]">
<input id="jc_4" type="checkbox" name="jc[4]">

To decide which input to select I would normally do:

document.getElementsByName('jc')

Then loop through all of them and decide which one to check, the problem here is that I don't really know how to handle this situation in these specific conditions.

I can't use JQuery and I can't change my HTML markup.

So I have this issue where I need to set a value to a checkbox depending on some variables.

The problem is that I encountered the next naming convention on the HTML I'll be working with:

<input id="jc_1" type="checkbox" name="jc[1]">
<input id="jc_2" type="checkbox" name="jc[2]">
<input id="jc_3" type="checkbox" name="jc[3]">
<input id="jc_4" type="checkbox" name="jc[4]">

To decide which input to select I would normally do:

document.getElementsByName('jc')

Then loop through all of them and decide which one to check, the problem here is that I don't really know how to handle this situation in these specific conditions.

I can't use JQuery and I can't change my HTML markup.

• javascript

Share Follow asked Jan 20, 2015 at 15:58 MandiMandi 41411 gold badge44 silver badges1212 bronze badges 6

• It's a shame the name is jc[1], any chance you can put jc[]? [] will give you autonumbering. – Halcyon Commented Jan 20, 2015 at 15:59
• Did not work, I tried that already. If you are talking about changing the HTML names I really can't do that. – Mandi Commented Jan 20, 2015 at 16:00
• what variables determines a value change? the name? – Royalty Commented Jan 20, 2015 at 16:02
• 1 What browser versions do you need to support? In reasonably-modern browsers, querySelectorAll() should do the trick. A polyfill is available for older browsers. – Paul Roub Commented Jan 20, 2015 at 16:03
• That would be the name, id or class. I can work with all of those. For this particular problem I decided to try with name, but if you've got a solution using the id, that would be great as well. – Mandi Commented Jan 20, 2015 at 16:04

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 8

You could use the begins with attribute selector with querySelectorAll:

var jcList = document.querySelectorAll("[name^=jc\\[]");

Beware though that this could match the following elements:

<input id="jc_1" type="checkbox" name="jc[0][0]">

Which may not be a problem for your particular requirements.

Too bad you can't change the markup.

You could do something like..

for(var i = 0; i<numberOfCheckboxes.length; i++){
    document.getElementsByName('jc['+i+']');
}

But this is really terrible code. And that's assuming that you know numberOfCheckboxes.

document.getElementsByName() returns an array (even if it just contains one element. You just need to reference the [0] element in your selected array like this document.getElementsByName('jc[1]')[0]

document.getElementsByName('jc[1]')[0].setAttribute('checked','checked');

DEMO