0
249
Vistasjs script solo funciona para un elemento, solo el primero
Tengo varios elementos de casilla de verificación en mi página, cada vez que alguien hace clic en cada uno de ellos, su color y texto cambian, pude hacerlo con CSS, pero también quería cambiar el ícono en el botón de casilla de verificación, así que uso javascript en mi código HTML, pero cuando ejecuto el script, solo funciona para un elemento, solo el primero, lo que significa que el ícono solo cambia para el primer botón de casilla de verificación, pero no funciona para todos los demás botones, traté de dar todo mi ID único del botón de casilla de verificación pero sigo teniendo el mismo problema
Esta es la casilla de verificación 1 y 2 cuando no está seleccionada
Esta es la casilla de verificación 1 y 2 cuando se selecciona
Aquí está el script que ejecuto para hacer eso:
PD: uso este script para todos los demás botones de casilla de verificación, ya intenté cambiar la identificación de los botones para que coincida con HTML y la identificación del script, pero sigo trabajando solo para el primero.
document.getElementById ('checkbox').addEventListener ('click', function (ev) { document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check'); }, false);ACTUALIZAR
He leído todas sus respuestas, pero ninguna parece resolver mi problema. Por favor, eche un vistazo al código completo aquí: https://codepen.io/edengandhi/pen/BaJoJYY
3 Respuestas
Responde la pregunta0
NO use la misma ID en varios elementos. Solo devolverá el primero que encuentre. En su lugar, debería configurar varios elementos con la clase. Entonces puedes hacer.
document.getElementByClassName('YourClassNameHere)
o
document.querySelectorAll('.YourClassNameHere') *** NOTA el . ... Necesitarás . para la determinación de una clase. # determinaría para una identificación.
0
document.getElementById ('checkbox').addEventListener ('click', function (ev) { document.getElementsByClassName('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check'); }, false);getElementsByClassName('icon') seleccionará todas las clases que tengan ese valor.
0
document.getElementById solo devolverá el primer elemento con la identificación especificada, por lo tanto, dar a varios elementos la misma identificación no ayudará. Sugiero revisar document.getElementsByClassName proporcionando las casillas de verificación de la misma clase en su lugar.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName