1

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

2
  • 1
    Hay varias formas de hacerlo, podrías agruparlos en la plantilla html, o usar un atributo data-*, etc. ¿Qué has intentado? Commented el 14 abr. 2022 a las 13:40
  • Recorro los checkboxes seleccionados y los agrego a un array. Lo que falta es agruparlo por nombre y añadirlo a un objeto con su mismo nombre
    – Antrax Sec
    Commented el 14 abr. 2022 a las 14:10

1 respuesta 1

2

Usa un FormData para extraer los datos del formulario, y luego los agrupas con un simple ciclo for. Te adjunto un ejemplo:

var formulario = document.getElementById('formulario');

function evitaSubmit_filtroMarca(e) {
  e.preventDefault();
  var formData = new FormData(formulario);
  
  var result = {};
  for(var pair of formData.entries()) {
   if(result.hasOwnProperty(pair[0]))
     result[pair[0]].push(pair[1])
   else
     result[pair[0]] = [pair[1]]     
  }
  console.log(result);
  return false;
}
<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>


Otra posible solución, como sugiere @Marcos es usar keys() y getAll():

var formulario = document.getElementById('formulario');

function evitaSubmit_filtroMarca(e) {
  e.preventDefault();
  var formData = new FormData(formulario);
  
  var result = {};
  for(var key of formData.keys()) {
    result[key] = formData.getAll(key)
  }
  console.log(result);
  return false;
}
<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>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.