Vanilla javascript select by name

Question

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.

It's a shame the name is jc[1], any chance you can put jc[]? [] will give you autonumbering. — Halcyon
– 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
– Mandi, Commented Jan 20, 2015 at 16:00
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
– 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
– Mandi, Commented Jan 20, 2015 at 16:04

CodingIntrigue · Accepted Answer · 2015-01-20 16:03:08Z

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.

answered Jan 20, 2015 at 16:03

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

4 Comments

Valentin Roudge Over a year ago

Way better than my answer. Kudos.

Organiccat Over a year ago

Also, as said by a commenter, there is a polyfill available for older browsers.

CodingIntrigue Over a year ago

@V.Roudge Depends. Your answer will accurately select all jc[N] elements, whereas this solution assumes there will never be an N-dimensional array element

Mandi Over a year ago

Perfect, this would work correctly for this particular case. Thanks will accept this answer shortly.

Valentin Roudge · Accepted Answer · 2015-01-20 16:02:33Z

1

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.

answered Jan 20, 2015 at 16:02

Valentin Roudge

5655 silver badges15 bronze badges

Comments

JRulle · Accepted Answer · 2015-01-20 16:04:23Z

1

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

answered Jan 20, 2015 at 16:04

JRulle

7,5666 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

Vanilla javascript select by name

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related