Imagina que tengo una serie de casillas de verificación seleccionadas. Cada uno tiene un valor y un nombre que se corresponde con un filtro.
<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue"> <input class="filter-item--checkbox" type="checkbox" name="colors" value="orange"> <input class="filter-item--checkbox" type="checkbox" name="items" value="chair"> <input class="filter-item--checkbox" type="checkbox" name="items" value="bed"> <input class="filter-item--checkbox" type="checkbox" name="material" value="plastic"> <input class="filter-item--checkbox" type="checkbox" name="material" value="wood">¿Cómo puedo ordenarlos en una matriz, como a continuación?
const filters = [ 'colors': [ 'blue', 'orange'], 'items': ['chair', 'bed'], 'material': ['plastic', 'wood'], ]Podría obtener los elementos y construir un objeto de matrices.
const result = {}; for (const { name, value } of document.getElementsByClassName('filter-item--checkbox')) { (result[name] ??= []).push(value); } console.log(result); <input class="filter-item--checkbox" type="checkbox" name="colors" value="blue"> <input class="filter-item--checkbox" type="checkbox" name="colors" value="orange"> <input class="filter-item--checkbox" type="checkbox" name="items" value="chair"> <input class="filter-item--checkbox" type="checkbox" name="items" value="bed"> <input class="filter-item--checkbox" type="checkbox" name="material" value="plastic"> <input class="filter-item--checkbox" type="checkbox" name="material" value="wood">Para el caso de uso de OP, donde se dijo que una solución debería apuntar a los controles de casilla de verificación solo marcados, uno podría/debería utilizar FormData Web-API y su método de entries junto con una tarea de reduce . Pasar una referencia de formulario directamente al constructor FormData garantiza que solo los datos de control activos formen parte del objeto de datos del formulario. Por lo tanto, el nombre/clave y el valor de un control de casilla de verificación no marcado no se reflejan en el objeto de datos del formulario.
const formData = new FormData(document.forms[0]); console.log( Array .from( formData.entries() ) .reduce((result, [key, value]) => { const groupedValueList = (result[key] ??= []); groupedValueList.push(value); return result; }, {}) ); .as-console-wrapper { min-height: 85%!important; } <form> <input type="checkbox" name="colors" value="blue" checked/> <input type="checkbox" name="colors" value="orange" checked/> <input type="checkbox" name="items" value="chair" checked/> <input type="checkbox" name="items" value="bed" checked/> <input type="checkbox" name="material" value="plastic" checked/> <input type="checkbox" name="material" value="wood" checked/> </form> En el caso de recopilar todos los valores de casilla de verificación agrupados, independientemente de su estado checked , solo se necesita cambiar ligeramente el enfoque anterior también ...
console.log( Array .from( document.querySelectorAll('form [type="checkbox"]') ) .reduce((result, { name:key, value }) => { const groupedValueList = (result[key] ??= []); groupedValueList.push(value); return result; }, {}) ); .as-console-wrapper { min-height: 85%!important; } <form> <input type="checkbox" name="colors" value="blue" checked/> <input type="checkbox" name="colors" value="orange"/> <input type="checkbox" name="items" value="chair" checked/> <input type="checkbox" name="items" value="bed"/> <input type="checkbox" name="material" value="plastic" checked/> <input type="checkbox" name="material" value="wood"/> </form>