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, Apr 17 '12 at 18:53
`[` and `]` aren't valid characters for the `id` attribute. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — iambriansreed, Apr 17 '12 at 18:55
@iambriansreed: Unless you're in an environment that only needs to target HTML5 browsers. Then they're fine. — , Apr 17 '12 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. — PoX, Apr 17 '12 at 18:59

score 3 · Accepted Answer · 2012-04-17T18:52:45.997

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 '12 at 18:52

answered Apr 17 '12 at 18:45

+1 although I don't usually vote on answers that I am competing with – ajax333221 Apr 17 '12 at 18:55
@ajax333221: Is it a competition? ;) I upvoted the other answers to even things out. – Apr 17 '12 at 18:57
I used this.id.replace(/\D/g, '') and works fine. Just curious is .split has more overhead than .replace ? – PoX Apr 17 '12 at 19:03
@PoX: Generally I'd assume it does since it needs to create an Array, but the difference will be minor overall. – Apr 17 '12 at 19:14
1

@PoX but that will replace every non-numeric chars, so `list2_code[4]` will be `24`, just be careful (or use `.split(/\[|\]/)[1]`) – ajax333221 Apr 17 '12 at 19:16

score 2 · Answer 2 · answered Apr 17 '12 at 18:46

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 '12 at 18:46

ajax333221

11,436
16
61
95

iambriansreed · Answer 3 · 2012-04-17T19:02:12.310

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 '12 at 19:02

answered Apr 17 '12 at 18:50

iambriansreed

21,935
6
63
79

Accessing key of an array on HTML check boxes

3 Answers3