CODEWITHSUNDEEP
javascriptjquerycheckbox
user3723240
user3723240

Reputation: 393

Jquery - get array of checkbox values

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.

Upvotes: 1

Views: 4196

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337714

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>

Upvotes: 7

Related Questions