4

Lo único que quiero hacer es que al hacer click en cualquiera de los checkbox salte una alerta. Con querySelectorAll no me funciona, ahora si hago un querySelector, me funciona pero solo la primera.

var chekes = document.querySelectorAll('input[type="checkbox"]');
  <div id="checks">
    <input type="checkbox" class="cheke" id="caracteres1" checked/>
    <label for="vehicle1"> ABC</label>
    <input type="checkbox" class="cheke" id="caracteres2" checked/>
    <label for="vehicle2"> abc</label>
    <input type="checkbox" class="cheke" id="caracteres3" checked/>
    <label for="vehicle3"> 123</label>
    <input type="checkbox" class="cheke" id="caracteres4" />
    <label for="vehicle3"> #$&</label>
  </div>
chekes.onchange = function () {
     alert("hola");
     }

Probé también con getElementsByClassName pero no funciona tampoco.

3
  • Te falta especificar un poco lo que buscas, quieres que se muestre la alerta en cualquiera de los checkbox?
    – David081
    Commented el 26 jul. 2022 a las 18:41
  • Hola David si, al hacer click en cualquier checkbox.
    – Meru
    Commented el 26 jul. 2022 a las 18:42
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    Commented el 26 jul. 2022 a las 18:44

2 respuestas 2

2

Una forma sencilla es detectando que elemento es el que detona el evento, esto mediante el elemento padre o contenedor, ejemplo:

let checks = document.querySelector("#checks");

checks.addEventListener("change", (event) => {
  alert(`Hiciste click en el Check con id: ${event.target.id}`)
});
<div id="checks">
  <input type="checkbox" class="check" id="caracteres1" checked />
  <label for="vehicle1"> ABC</label>
  <input type="checkbox" class="check" id="caracteres2" checked />
  <label for="vehicle2"> abc</label>
  <input type="checkbox" class="check" id="caracteres3" checked />
  <label for="vehicle3"> 123</label>
  <input type="checkbox" class="check" id="caracteres4" />
  <label for="vehicle3"> #$&</label>
</div>

0

Es entendible que pase eso porque querySelector devuelve el primer elemento que encuentre mientras que querySelectorAll una lista.

Al ser una lista, necesitas programar lo que quieres que suceda con cada uno de sus elementos.

Supón que tienes un arreglo con números y quieres que se aumente en uno cada uno. Para ello puedes usar un ciclo:

arreglo = [4, 8, 1]
for (let i = 0; i < arreglo.length; i++){
    arreglo[i]++
}

Lo mismo sucede con querySelectorAll.

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.