Tengo un formulario con varios checkbox cada uno tiene su propio valor y pertenece a un grupo por el nombre.
Grupos:
- Marca
- Procesador
- RAM
function evitaSubmit_filtroMarca(e) {
console.log('Capturamos el submit');
e.preventDefault();
var formulario = document.getElementById('formulario');
var checkBoxes = formulario.querySelectorAll('input[type="checkbox"]');
recorreCheckBox(checkBoxes);
return false;
}
function recorreCheckBox(checkBoxes) {
let result = [];
var nombre;
let resultados = new Object();
checkBoxes.forEach(item => {
console.log(item.name)
nombre = item.name;
if (item.checked) {
result.push(item.value);
}
})
resultados.nombre = result;
console.log(resultados)
return result;
}
<form id="formulario" onsubmit="return evitaSubmit_filtroMarca(event);">
<div class="input-list p-0">
<div class="form-check p-0">
<input type="checkbox" class="form-check-input" value="HP" id="marca_1" name="marca">
<label class="form-check-label" for="marca_1">HP</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" value="Lenovo" id="marca_2" name="marca">
<label class="form-check-label" for="marca_2">Lenovo</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" value="Intel Core i3" id="procesador_1" name="procesador">
<label class="form-check-label" for="procesador_1">Intel Core i3</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" value="Intel Core i5" id="procesador_2" name="procesador">
<label class="form-check-label" for="procesador_2">Intel Core i5</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" value="8 GB" id="ram_1" name="ram">
<label class="form-check-label" for="ram_1">8 GB</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary btn-sm" id="btn_filtrar">Filtrar</button>
</div>
</form>
Como puedo obtener los checkboxes seleccionados y agruparlos en un objeto por su nombre
{
"marca": [
"Lenovo",
"HP"
],
"procesador": [
"Intel Core i3",
"Intel Core i5"
]
}
Cualquier ayuda o referencia sirve, estuve buscando referencias sobre este punto y no encontré alguna
Posteriormente debo recorrer el objeto por su nombre para realizar otras funciones
html
, o usar un atributodata-*
, etc. ¿Qué has intentado?