Jquery - get array of checkbox values

Question

I have a few checkboxes with the name="location[]" and each checkbox has a different value value="3" or value="5" etc. I am wondering how in jquery when these boxes are checked to put the value inside an array called location[] ? Here is my html:

<ul id="searchFilter">
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="1">Toronto</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="3">New York</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="6">London</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="5">Paris</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="4">Berlin</li>             
</ul>

and heres what I got as far a jquery:

var $checkboxes = $("input:checkbox");
var opts = [];
$checkboxes.each(function(){
     if(this.checked){
     opts.push(this.name);
}

this returns just location[] and adds another location[] when I check another item.

Please help.

I also have other checkboxes with price[], sqft[]...I am looking to keep the checkboxes in the same ground, so arrays inside 1 array...i hope that makes sense.

Rory McCrossan · Accepted Answer · 2021-05-17 09:15:37Z

7

You can use the :checked selector and map() to create an array from a set of matched elements. Try this:

$(':checkbox').change(e => {
  let opts = $(":checkbox:checked").map((i, el) => el.value).get();
  console.log(opts);
});

/* alternative for IE support:
$(':checkbox').change(function() {
  var opts = $(":checkbox:checked").map(function() {
    return this.value;
  }).get();
  console.log(opts);
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="1">
    Toronto
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="3">
    New York
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="6">
    London
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="5">
    Paris
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="4">
    Berlin
  </li>
</ul>

I have multiple checkboxes, location[], price[], sqft[] - how could I keep them in separate arrays but still inside the opts?

To do that you need to restrict the map() to the current ul element by using closest():

$(':checkbox').change(function() {
  let opts = $(this).closest('ul').find(":checkbox:checked").map((i, el) => el.value).get();
  console.log(opts);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="1">
    Toronto
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="3">
    New York
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="6">
    London
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="5">
    Paris
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="4">
    Berlin
  </li>
</ul>

<ul id="searchFilter">
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="2">
    $200,000 to $299,999
  </li>
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="3">
    $300,000 to $399,999
  </li>
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="4">
    $400,000 to $499,999
  </li>
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="5">
    $500,000+
  </li>
</ul>

edited May 17, 2021 at 9:15

answered Jul 17, 2014 at 13:27

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

4 Comments

Maxwell Donathan Over a year ago

Elegant solution as always!

user3723240 Over a year ago

This is working very well, one last question, I have multiple checkboxes, location[], price[], sqft[]....how could I keep them in separate arrays? but still inside the opts...I will still accept your answer, but do u know how I would do that?

user3723240 Over a year ago

I updated the fiddle example with the second set of checkboxes to show u what i mean: jsfiddle.net/6zz5f/1

Rory McCrossan Over a year ago

@user3723240 you need to restrict the map to the current ul element by using closest, see this update: jsfiddle.net/6zz5f/2

Collectives™ on Stack Overflow

Jquery - get array of checkbox values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related