CODEWITHSUNDEEP
javascripthtmljquery
Code Guy
Code Guy

Reputation: 3198

Jquery to get array of objects based on checkbox values

I have multiple checkboxes in a html form I need to get the array of objects when any of the checkboxes in the html form is checked or unchecked, that is when a change is made it has to return the array of objects

I prefer to use $.map

The expected value is

[{"A": "dataA"},{"B": "dataB"}] when both A and B are checked [{"A": "dataA"}] when only A is checked and so on

I have tried with

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('input[type="checkbox"]').change(function() {
    
alert($.map($("input[type='checkbox']:checked"), function(i) {
  var a = []
  a[$(this).attr("name")] = $(this).attr("data-id");
  return a
}));
});
});
</script>

<input data-id="dataA" name="A" type="checkbox" />A
<input data-id="dataB" name="B" type="checkbox" />B
</head>
</html>

Upvotes: 0

Views: 177

Answers (2)

mplungjan
mplungjan

Reputation: 177786

Here is an object array using $().map() instead of $.map - note the .get() to get the array

$(function() {
  $('input[type="checkbox"]').on("change", function() { // using function allows "this"
    const res = $("input[type='checkbox']:checked").map(function(i) {
      return { [this.name]: this.dataset.id };
    }).get();
    console.log(res)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input data-id="dataA" name="A" type="checkbox" />A
<input data-id="dataB" name="B" type="checkbox" />B

And here is an object:

$(function() {
  $('input[type="checkbox"]').on("change", function() {
    const res = {}
    $("input[type='checkbox']:checked").each(function(i) {
      res[this.name] = this.dataset.id;
    });
    console.log(res)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input data-id="dataA" name="A" type="checkbox" />A
<input data-id="dataB" name="B" type="checkbox" />B

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue with your logic is that map() returns an array; you don't need to define a new array within the iteration handler and return that. You simply need to return the object you want to generate from each checkbox, like this:

jQuery($ => {
  let $cb = $(':checkbox').on('change', () => {
    let checkedValues = $cb.filter(':checked').map((i, el) => ({ [el.name]: el.dataset.id })).get();
    console.log(checkedValues);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input data-id="dataA" name="A" type="checkbox" />A
<input data-id="dataB" name="B" type="checkbox" />B

Upvotes: 1

Related Questions