Accessing key of an array on HTML check boxes

Question

I have a tree with checkboxes and their id has key for item and value as their value.

<input type="checkbox" name="list_code[4]" id="list_code[4]" value="AG12345678" checked="checked">

When users select a tree element I can access those by

$('input[name^="list_code"]').each(function() {
    if ($(this).attr('checked')) 
        list_code = $(this).val();
});

I am able to get value AG12345678 but I need to get key value too which is 4 from list_code[4] in this case. How can I access that value?

The answers so far seem like overkill. Just out of curiosity, how are you rendering your checkboxes? — Robin Maben
– Robin Maben, Commented Apr 17, 2012 at 18:53
[ and ] aren't valid characters for the id attribute. stackoverflow.com/questions/70579/… — iambriansreed
– iambriansreed, Commented Apr 17, 2012 at 18:55
@iambriansreed: Unless you're in an environment that only needs to target HTML5 browsers. Then they're fine. — user1106925
– user1106925, Commented Apr 17, 2012 at 18:58
@Robin I am using dynatree inside a dropdown box. When expanded users can select from tree or write to box which auto completes and selects auto completed element. — aphodius
– aphodius, Commented Apr 17, 2012 at 18:59

2 revs user1106925 · Accepted Answer · 2012-04-17 18:52:45Z

3

var n = this.id.slice(this.id.indexOf('[') + 1, this.id.indexOf(']'));

or...

var n = this.id.replace(/\D/g, '');

or...

var n = (this.id.match(/\d+/) || [])[0];

or if there could be other unwanted numbers...

var n = (this.id.match(/\[(\d+)\]/) || [])[1];

Or if you control the source, a good solution would be to use a data- attribute for future HTML5 support...

<input type="checkbox" data-number="4" name="list_code[4]" id="list_code[4]" value="AG12345678" checked="checked">

...then in HTML5 browsers, you could do...

this.data.number;

...or for legacy support, you could do...

this.getAttribute('data-number');

edited Apr 17, 2012 at 18:52

community wiki

2 revs
user1106925

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

5 Comments

ajax333221 Over a year ago

+1 although I don't usually vote on answers that I am competing with

user1106925 Over a year ago

@ajax333221: Is it a competition? ;) I upvoted the other answers to even things out.

aphodius Over a year ago

I used this.id.replace(/\D/g, '') and works fine. Just curious is .split has more overhead than .replace ?

user1106925 Over a year ago

@PoX: Generally I'd assume it does since it needs to create an Array, but the difference will be minor overall.

ajax333221 Over a year ago

@PoX but that will replace every non-numeric chars, so list2_code[4] will be 24, just be careful (or use .split(/\[|\]/)[1])

ajax333221 · Accepted Answer · 2012-04-17 18:46:13Z

2

With this:

this.getAttribute("id").split(/\[|\]/)[1];

Explanation:

this.getAttribute("id") gets the id "list_code[4]"
split(/\[|\]/) splits it into ["list_code","4",""]
[1] takes the element at index 1 which is 4

answered Apr 17, 2012 at 18:46

ajax333221

11.9k16 gold badges65 silver badges95 bronze badges

Comments

iambriansreed · Accepted Answer · 2012-04-17 19:02:12Z

1

Try:

$('input[name^="list_code"]').each(function() {
    if ($(this).is(':checked')) 
        list_code = $(this).val();
        key = parseInt($(this).attr('name').replace(/[^0-9]/g,''));
});

If you find your field name attributes have numbers outside the index then do the following:

        key = parseInt($(this).attr('name').split('[')[1].replace(/[^0-9]/g,''));

edited Apr 17, 2012 at 19:02

answered Apr 17, 2012 at 18:50

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Collectives™ on Stack Overflow

Accessing key of an array on HTML check boxes

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related