Jquery to get array of objects based on checkbox values

Question

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>

mplungjan · Accepted Answer · 2022-01-24 12:35:12Z

1

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

edited Jan 24, 2022 at 12:35

answered Jan 24, 2022 at 11:23

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

6 Comments

Code Guy Over a year ago

Thanks. I want the return type to be an array type. How this can be done?

mplungjan Over a year ago

See updated script

Code Guy Over a year ago

Which means if html form has 10 checkboxes and 6 checkboxes are checked, the output of the code should give an array with 6 objects

mplungjan Over a year ago

Yes. that is what my (now first) example does

Code Guy Over a year ago

This is perfect!

|

Rory McCrossan · Accepted Answer · 2022-01-24 11:29:38Z

1

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

answered Jan 24, 2022 at 11:29

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Collectives™ on Stack Overflow

Jquery to get array of objects based on checkbox values

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related