Quiero que la etiqueta de mis casillas de verificación se resalte cuando está encendida y apagada (como un interruptor IRL) y no estoy averiguando cómo llegar a todas sin tener que hacer un oyente para cada una de ellas (Creo que debe haber alguna manera)
Las casillas de verificación son como:
<label id="labeltest"><input id="checkboxtest" type="checkbox" name="diet" value="Egg" hidden/>Egg</label>JS ser como:
var labeltest = document.getElementById("labeltest") labeltest.addEventListener("click", function () { if (this.firstChild.checked) { this.classList.remove("unchecked") this.classList.add("checked") } else if (this.firstChild.checked === false) { this.classList.remove("checked") this.classList.add("unchecked") } });Lo intenté con clase en lugar de ID pero no funcionó
También probé algo como esto con clases para hacer de labeltest una matriz:
labeltest.forEach(element => { element.addEventListener("click", function () { (FUNCTION HERE) });Pero tampoco funcionó
No necesita JavaScript para lograr esto.
Si reordena su entrada y etiquetas como esta:
<input id="diet-egg" type="checkbox" name="diet" value="Egg" hidden/> <label for="diet-egg">Egg</label> Importante: asegúrese de que el valor del atributo for coincida con la id de la entrada a la que está conectada la etiqueta. Esto permite marcar y desmarcar la casilla de verificación haciendo clic en el elemento <label> .
Luego puede usar el selector hermano adyacente + para definir los estilos de la etiqueta siempre que la entrada esté marcada y desmarcada.
input + label { /* unchecked label styles */ } input:checked + label { /* checked label styles */ }