Javascript does not recognize HTML arrays

Question

How to pass this kind of HTML input to JavaScript so that it recognizes these array values?

<input type="checkbox" id="collection[]" value="0">
<input type="checkbox" id="collection[]" value="1">
<input type="checkbox" id="collection[]" value="2">]

The only idea I have (never played with js this way, tbh) is to reach it through:

$("#collection").val();

But I got undefined error. I have no other idea how to make javascript recognize that variable collection is an array and has to passed as such.

Thanks in advance!

What is it that you are trying to do? Decide which checkboxes are checked? — taylorcressy
– taylorcressy, Commented Jun 15, 2014 at 15:07
Sorry, didn't change name to id. Doesn't work either. @taylorcressy: I'm trying to pass values of selected checkboxes to json and then, through jQuery, to a php file so that only selected checkboxes are processed. But I need javascript to recognize which checkboxes to pass... — Sates
– Sates, Commented Jun 15, 2014 at 15:08

taylorcressy · Accepted Answer · 2014-06-15 15:17:30Z

1

Remember, IDs need to be unique within your document. So set by 'name' not by id.

You can use

$('#someid').is(":checked");

for individually checking each checkbox, or loop through them with a jQuery selector

To loop through them set

<input type="checkbox" name="checkboxes" value="0">
<input type="checkbox" name="checkboxes" value="1">
<input type="checkbox" name="checkboxes" value="2">

Then with jQuery,

$('input[name=checkboxes]:checked').each(function(i, e) {
        e.val();   //The value of the checkbox that is selected
});

answered Jun 15, 2014 at 15:17

taylorcressy

9648 silver badges24 bronze badges

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

Comments

Shaunak D · Accepted Answer · 2014-06-15 15:25:03Z

1

You cannot have Duplicate Ids. Though duplicate IDs will give you desired output in this case, it is invalid to use them for multiple elements.

<input type="checkbox" name="collection[]" value="0">
<input type="checkbox" name="collection[]" value="1">
<input type="checkbox" name="collection[]" value="2">

There are many ways you can access array based elements.

jQuery .map(): Alternative is .each()

Demo

$("[name='collection[]']").map(function(){return $(this).val();}).get()

Working Demo for checking checked inputs. To get the checked checkbox,

$('input').change(function () {
    console.log($("[name='collection[]']:checked").map(function () {
        return $(this).val();
    }).get());
});

edited Jun 15, 2014 at 15:25

answered Jun 15, 2014 at 15:13

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

ugursogukpinar · Accepted Answer · 2014-06-15 15:16:36Z

0

$("#collection")

It mean's ,"Find me an element which id's equal collection on page" , of course it can't find anything. You can use .each function and you can use checkboxes attributes. For example ;

var myCheckBoxArray = []

$("input[type='checkbox']").each(function(i,elm){
    myCheckBoxArray.push(elm);
});

answered Jun 15, 2014 at 15:16

ugursogukpinar

3371 silver badge5 bronze badges

1 Comment

taylorcressy Over a year ago

He only wants the checkboxes that are checked

Collectives™ on Stack Overflow

Javascript does not recognize HTML arrays

3 Answers 3

Comments

Demo

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related