Estoy tratando de hacer que la casilla de verificación se comporte con la tecla Intro (cuando se tabula) de la misma manera que lo hace normalmente con la barra espaciadora o cuando se hace clic. Preparé un caso en el que la casilla de verificación está marcada, pero luego no actúa como debería, es decir, quiero que muestre un texto previamente oculto y desaparezca. ¿Cómo puedo conseguir esto? Sin embargo, agregar algo como document.getElementById("myCheck").click() no funciona.
document.addEventListener('keydown', (e) => { if( e.key === "Enter" && e.target.classList.contains('myCheck')){ e.target.checked = !e.target.checked; } }) function myFunction() { var form = document.getElementById("form"); var checkBox = document.getElementById("myCheck"); var text = document.getElementById("text"); if (checkBox.checked === true){ form.style.display = "none"; text.style.display = "block"; } else { form.style.display = "inline-block"; text.style.display = "none"; } } * { margin: 10px; padding: 0; font-size: 50px; } input { width: 30px; height: 30px; } p { color: red; text-transform: uppercase; } <form class="form" id="form" style="display:inline-block"> <input type="checkbox" class="myCheck" id="myCheck" onclick="myFunction()"> <label for="myCheck">Checkbox</label> </form> <p id="text" style="display: none;">checkbox is checked</p>Todo lo que necesita hacer es activar el evento de click , que marcará la casilla. Si configura manualmente la checked y luego hace click en el gatillo, se deshará la configuración manual.
document.addEventListener('keydown', (e) => { if( e.key === "Enter" && e.target.classList.contains('myCheck')){ //e.target.checked = !e.target.checked; e.target.click() } }) function myFunction() { var form = document.getElementById("form"); var checkBox = document.getElementById("myCheck"); var text = document.getElementById("text"); if (checkBox.checked === true){ form.style.display = "none"; text.style.display = "block"; } else { form.style.display = "inline-block"; text.style.display = "none"; } } * { margin: 10px; padding: 0; font-size: 50px; } input { width: 30px; height: 30px; } p { color: red; text-transform: uppercase; } <form class="form" id="form" style="display:inline-block"> <input type="checkbox" class="myCheck" id="myCheck" onclick="myFunction()"> <label for="myCheck">Checkbox</label> </form> <p id="text" style="display: none;">checkbox is checked</p>