Tengo dos páginas en las que necesito mostrar el mismo comportamiento al marcar y desmarcar una casilla. Al verificar, recibo el mensaje de confirmación y al hacer clic en Sí, se marca la casilla. Para desmarcar, no quiero que se muestre el mensaje, solo desmarque u otra opción es mostrar un mensaje de confirmación pero diferente del que aparece al marcar la casilla de verificación.
Actualmente tengo esto:
let checkbox_elem = document.querySelectorAll('.first_class, .second_class'); checkbox_elem.forEach(elem => { elem.addEventListener("click", (e)=> { var message = 'Are you sure you want to CHECK this?'; confirm(message) || e.preventDefault(); }); });Hay dos clases (first_class y second_class) en dos páginas diferentes, pero independientemente de que marque o desmarque, siempre mostrará el mismo mensaje.
Simplemente agregue una condición if para la propiedad checked :
let checkbox_elem = document.querySelectorAll('.first_class, .second_class'); checkbox_elem.forEach(elem => { elem.addEventListener("click", (e)=> { console.log(e.target.checked); if(e.target.checked){ var message = 'Are you sure you want to CHECK this?'; confirm(message) || e.preventDefault(); } /*else{ var message = 'Are you sure you want to UNCHECK this?'; confirm(message) || e.preventDefault(); }*/ }); }); <input type="checkbox" class="first_class" name="scales" checked> <label for="scales">Scales</label>Según el valor verdadero/falso, también puede mostrar un mensaje diferente. Descomente la cláusula else para ver eso.