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>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" />BAnd 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" />BThe 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