Usando un interruptor de palanca Bootstrap5 (que es básicamente solo una casilla de verificación) para activar y desactivar líneas en una cuadrícula. Lo tengo configurado, de modo que si la alternancia es verdadera, agregue la clase que agrega líneas para la cuadrícula y, si es falsa, elimine la clase y las líneas. Cuando desactivo la clase que contiene el estilo de la línea, se elimina correctamente, pero cuando la enciendo, la clase no vuelve y activa las líneas. También estoy usando forEach() para recorrer todos los divs.

Tengo console.log dentro y se activan para cada cambio, así que no estoy seguro de lo que me estoy perdiendo. Aquí está el código

JS

 let gridToggleSwitch = document.querySelector("#gridToggle") gridToggleSwitch.addEventListener('change', () => { let boxList = document.querySelectorAll('.box') let toggleChoice = gridToggleSwitch.checked if(toggleChoice == true) { console.log("LINES") boxList.forEach((e) => { console.log(e) e.classList.add('box') }) } else if (toggleChoice == false) { console.log('NO LINES') boxList.forEach((e) => { console.log(e) e.classList.remove('box') }) } else { console.log('woops') } })

CSS:

 .box { border: 1px solid black; }