Tengo varias casillas de verificación en un formulario html. Necesito obtener la matriz de objetos cuando cualquiera de las casillas de verificación en el formulario html está marcada o desmarcada, es decir, cuando se realiza un cambio, debe devolver la matriz de objetos.
Prefiero usar $.map
El valor esperado es
[{"A": "dataA"},{"B": "dataB"}] cuando se marcan tanto A como B [{"A": "dataA"}] cuando solo se marca A y así sucesivamente
he probado con
<!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>Aquí hay una matriz de objetos que usa $().map() en lugar de $.map; tenga en cuenta el .get() para obtener la matriz
$(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" />BY aquí hay un objeto:
$(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" />BEl problema con su lógica es que map() devuelve una matriz; no necesita definir una nueva matriz dentro del controlador de iteración y devolverla. Simplemente necesita devolver el objeto que desea generar desde cada casilla de verificación, así:
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