Getting value of an HTML array with jQuery

Question

I have an array of input boxes like so.

<form>
  9 <input type="checkbox" name="date[]" value="9">
  10 <input type="checkbox" name="date[]" value="10">
  11 <input type="checkbox" name="date[]" value="11">
</form>

I need the values stored in the date array, to pass it to an ajax call.

I've tried

    console.log($("input[name^=date]").val());

But this only outputs 9. I could always check if the individual elements are checked and then get their values, make an array and pass it to the ajax call, but is there a way to do this directly?

EDIT : Why does the console.log($("input[name^=date]").val()); output 9 only?

First line from api.jquery.com/val : Get the current value of the first element in the set of matched elements. (emphasis mine) — xec
– xec, Commented Sep 16, 2014 at 16:27

tymeJV · Accepted Answer · 2014-09-16 15:51:38Z

2

You can do:

var values = $("input[name='date[]']:checked").map(function() {
    return this.value;
}).get();

values will be an array of the values of the checked boxes.

answered Sep 16, 2014 at 15:51

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

PeterKA · Accepted Answer · 2014-09-16 16:11:23Z

1

If you're submitting the data via ajax, you just need to serialize the form to get all the data, already URL-encoded:

 $('form').serialize();

For example, if all checkboxes are selected, you will get the following data:

date%5B%5D=9&date%5B%5D=10&date%5B%5D=11 
//which is date[]=9&date[]=10&date[]=11

And PHP can comfortably handle the array parameter: date[].

edited Sep 16, 2014 at 16:11

answered Sep 16, 2014 at 16:01

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

1 Comment

aandis Over a year ago

Awesome! I didn't know about .serialize(). jQuery continues to surprise me!

Y.Puzyrenko · Accepted Answer · 2014-09-16 15:51:37Z

0

Try each

var arr = []
$("input[name^=date]").each(function(){
     arr.push($(this).val())

})

Fiddle

answered Sep 16, 2014 at 15:51

Y.Puzyrenko

2,1951 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Getting value of an HTML array with jQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related