2

Tengo el código de abajo, éste me oculta los divs pero quiero lograr la inversa: que en un entorno con varias cards, al seleccionar un check o varios, solo queden los checks con el id que tenga el value de éste. Ejemplo: si selecciono manzana y peras, que solo queden visibles las cards con id manzana y peras y las otras tengan display:none, y al quitar el check vuelvan al estado original.

function getChecked() {
  var checkboxes = document.querySelectorAll('input[name="colorCheckbox"]:checked');
  var values = [...checkboxes].map(checkbox => checkbox.value);
  console.log(values);
  for (var i = 0; i < values.length; i++) {
    document.getElementById(values).style.display = "none";
  }
}
<div>
  <label>
    <input type="checkbox" name="colorCheckbox" onchange="getChecked()" value="red">
    red
  </label>
  <label>
    <input type="checkbox" name="colorCheckbox" onchange="getChecked()" value="green">
      green
  </label>
</div>
<div class="red box" id="red">Red Selected</div>
<div class="green box" id="green">Green Selected</div>

1
  • Si, me quedó colgado ahí, al editar. Probé primero con jquery pero no me convenció. Ahi edito el post. Gracias por la aclaración
    – Gastón
    Commented el 13 mar. 2023 a las 18:08

1 respuesta 1

4

Te dejo un ejemplo muy practico y mas dinámico. Cambie toda las funciones en JavaScript para que te funcione agregando mas inputs tipo check, sin necesidad de estar especificando la función onchange a cada uno, eso no es escalable.

Si agregas mas checks solo agrega la clase check al elemento y en automático tendrán la misma función.

//VERIFICAMOS QUE EL DOM ESTE CARGADO COMPLETAMENTE
window.addEventListener('load', function() {
  //OBTENEMOS TODOS LOS CHECKS CON LA CLASE "CHECK"
  var checks = document.querySelectorAll('.check');
  //console.log(checks)
  //RECORREMOS DICHOS ELEMENTOS
  checks.forEach(function(check) {
    //INICIALIZACION DE TODOS LOS CHECK COMO TRUE DESDE QUE SE CARGA LA PAGINA
    check.setAttribute('checked', 'true')
    //VERIFICAMOS QUE ELEMENTO CHECK DETONO EL EVENTO CHANGE
    check.addEventListener('change', function(e) {
      //console.log(this)
      //OBTENEMOS EL ELEMENTO CON THIS Y VERIFICAMOS SI ESTA MARCADO
      if (this.checked) {
        //console.log(this.value)
        //MEDIANTE EL VALUE DEL CHECK BUSCAMOS EL DIV ESPECIFICO A OCULTAR SI ESTA MARCADO
        document.getElementById(this.value).style.display = 'block';
      } else {
        //MEDIANTE EL VALUE DEL CHECK BUSCAMOS EL DIV ESPECIFICO A MOSTRAR SI NO ESTA MARCADO
        document.getElementById(this.value).style.display = 'none';
      }
    })
  })
})
<div>
  <label><input type="checkbox" name="colorCheckbox" class="check" value="red">
    red
  </label>

  <label><input type="checkbox" name="colorCheckbox" class="check" value="green">
    green
  </label>
</div>
<div class="red box" id="red">Red Selected</div>
<div class="green box" id="green">Green Selected</div>

Dime si te sirvio.

4
  • Exactamente lo que necesito pero al revés porque arranco con un display:inline para todos los valores pero al seleccionar uno o varios deberia mostrarse lo que vaya por filtro.
    – Gastón
    Commented el 13 mar. 2023 a las 21:32
  • Por lo que entiendo, los divs inician ocultos y al clickear el check se muestran?, solo es cambiar el display, si no puedes dime para cambiar mi respuesta y confirma lo que te pregunte. Commented el 13 mar. 2023 a las 22:05
  • Gracias Antonio por responder, los divs inician todos desplegados con un check all, al marcar X categoria deberian pasar los demás a estar ocultos y ese o esos mostrarse. El codigo de los divs fue un ejemplo, el codigo original tiene 10 categorias, con el ID que saca del value deberia poner a los que no estén marcados un display :none; logré hacerlo modificando un poco tu codigo pero solo me toma uno de cada categoría.
    – Gastón
    Commented el 13 mar. 2023 a las 22:13
  • 1
    No comprendo tu lógica de hacerlo así, si mencionas que es un filtro, por ende tu seleccionas la opción que quieres que se muestre, si se desmarca por lógica esa opción desaparece. Modifique la respuesta, revisala para ver si es algo de lo que mencionas en tu comentario anterior, por eso la importancia de esclarecer y redactar con el código completo y especificación del problema desde el principio. Commented el 14 mar. 2023 a las 18:58

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.