CODEWITHSUNDEEP
javascriptjqueryjson
Sates
Sates

Reputation: 408

Javascript does not recognize HTML arrays

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!

Upvotes: 0

Views: 252

Answers (3)

Shaunak D
Shaunak D

Reputation: 20626

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());
});

Upvotes: 1

taylorcressy
taylorcressy

Reputation: 965

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
});

Upvotes: 1

ugursogukpinar
ugursogukpinar

Reputation: 337

$("#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);
});

Upvotes: 0

Related Questions