'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>
javascripthtmljquery


Solution 1:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rory McCrossan

Related Questions