Tengo un formulario con grupos de casillas de verificación, así:
<input type="checkbox" name="group_one" value="1"> <input type="checkbox" name="group_one" value="2"> <input type="checkbox" name="group_two" value="1"> <input type="checkbox" name="group_two" value="2">
Lo que estoy tratando de lograr es en form.change() Me gustaría tener una matriz con claves de nombres de casillas de verificación y una matriz de valores, así
var checkboxes = $('input').filter(':checked'); var myArray = []; checkboxes.each(function () { var name = $(this).attr('name'); var val = $(this).val(); myArray[name] = val; });
Como resultado, estoy tratando de obtener una matriz con 'nombre' como claves y 'val' como matriz, así:
[group_one: {1,2}, group_two: {1,2}]
Espero que esto tenga sentido. ¡Gracias por cualquier ayuda de antemano!
De hecho, la salida deseada debería tener la matriz y la notación de objeto simple intercambiadas. La estructura externa es un objeto simple con claves nombradas, mientras que la estructura interna es una matriz de valores:
{group_one: [1,2], group_two: [1,2]}
Por lo tanto, debe inicializar la estructura externa como un objeto simple y tal vez nombrarlo en plural:
var myArrays = {};
Luego, en su ciclo, verifique si ya tiene un valor para la clave dada. De lo contrario, cree una matriz con []
y agregue el valor a eso. De lo contrario, agregue el valor a la matriz que ya estaba allí:
$("form").change(function () { var checkboxes = $('input').filter(':checked'); var myArrays = {}; checkboxes.each(function () { var name = $(this).attr('name'); var val = $(this).val(); if (!(name in myArrays)) myArrays[name] = []; myArrays[name].push(val); }); $("pre").text(JSON.stringify(myArrays, null, 2)); // For debugging });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="checkbox" name="group_one" checked value="1">Option 1 <input type="checkbox" name="group_one" value="2">Option 2 <input type="checkbox" name="group_one" checked value="3">Option 3 <br> <input type="checkbox" name="group_two" value="1">Option 1 <input type="checkbox" name="group_two" checked value="2">Option 2 <input type="checkbox" name="group_two" checked value="3">Option 3 </form> <pre></pre>