Me gustaría crear un evento de clic en una casilla de verificación y agregar una clase CSS. Puedo usar "classList.toggle" para agregar y eliminar una clase CSS haciendo clic en el botón 2 veces. Esto es lo que me gustaría hacer. Cuando hago clic en la casilla de verificación del primero, me gustaría agregar la clase "xyz" y cuando hago clic en la misma casilla de verificación, me gustaría agregar la clase "abc" y eliminar la clase "xyz".
const openModal = document.getElementById('mark-as-gift'); const modalBg = document.querySelector('.addtnew'); openModal.addEventListener('click', openModalBtn); function openModalBtn() { modalBg.classList.add('menscart2'); }Aquí está mi código JS de inicio. Gracias por la ayuda
puede usar el método DOM de alternar, o en su lugar puede usar una lata booleana que verificará si la casilla de verificación está marcada o no. haga clic aquí para ir a los documentos oficiales de MDN
Ejemplo de código del método de alternar:
var element = document.getElementById("myDIV"); element.classList.toggle("mystyle");Espero haber ayudado :)
Use DOM.className.split(' ').indexOf(yourclassname) para verificar dentro de la clase si contiene y luego elimínelo llamando a DOM.classList.remove(yourclassname) , ejemplo:
const openModal = document.getElementById('mark-as-gift'); const modalBg = document.querySelector('.addtnew'); openModal.addEventListener('click', openModalBtn); function openModalBtn() { if(modalBg.className.split(" ").indexOf("menscart2") >= 0) { modalBg.classList.remove('menscart2'); } else { modalBg.classList.add('menscart2'); } console.log(`Class name this element have: ${modalBg.className}`) } .menscart2 { width: 100px; height: 100px; background: blue; } <input id="mark-as-gift" type="checkbox" /> <div class="addtnew">Hello</div>const openModalBtn = document.querySelector("yourButton") const modalBg = document.querySelector('.addtnew'); const classes = ["xyz", "abc"]; let toggled = false; openModal.addEventListener('click', openModalBtn); function openModalBtn() { modalBg.classList.add(classes[+ toggled]); modalBg.classList.remove(classes[+ !toggled]); toggled = !toggled; }