Quiero marcar la casilla de verificación cuando se presiona enter y la salida debe mostrarse en la etiqueta de línea de manera similar después de presionar la casilla de verificación de retroceso debe desmarcarse y el elemento debe eliminarse de la línea. pero como puedo hacer eso sin usar jquery.
for (i = 301; i < 359; i++) { document.write("<input type='checkbox' value='" + i + "' onkeydown='absent(this)'>" + i + "<br>"); } function absent(e) { if (event.key == "Enter") { e.checked = true; document.getElementById("dis").innerHTML += " " + e.value; } if (e.key == "Backspace") { e.checked = false; var x = document.getElementById("dis").innerHTML; var m = x.replace(e.value, "") document.getElementById("dis").innerHTML = m; } } li { max-width: 800px; word-wrap: break-word; font-size: 27px; margin-left: 200px; color: blue; margin-top: 100px; } h1 { color: crimson; font-weight: 1000px; font-size: 60px; margin-left: 500px; ; } <!DOCTYPE html> <html> <head> <title>Checkbox Attandance</title> </head> <body style="background-color: blanchedalmond;"> <h1>Attendance</h1> <li id="dis">Present Students<br></li><br> </body> </html>Añadir || event.key == "Delete" dentro de sus if , y funcionará
<!DOCTYPE html> <html> <head> <title>Checkbox Attandance</title> <style> li { max-width: 800px; word-wrap: break-word; font-size: 27px; margin-left: 200px; color: blue; margin-top: 100px; } h1{ color: crimson; font-weight: 1000px; font-size: 60px; margin-left: 500px;; } </style> </head> <body style="background-color: blanchedalmond;" > <h1>Attendance</h1> <li id="dis">Present Students<br></li><br> <script> for(i=301;i<359;i++){ document.write("<input type='checkbox' value='"+i+"' onkeydown='absent(this)'>"+i+"<br>"); } function absent(e){ if(event.key=="Enter"){ e.checked=true; document.getElementById("dis").innerHTML+=" "+e.value; } if(event.key === "Backspace" || event.key === "Delete"){ e.checked=false; var x=document.getElementById("dis").innerHTML; var m=x.replace(e.value,"") document.getElementById("dis").innerHTML=m; } } </script> </body> </html>Aquí hay una demostración en la que puede navegar (usando la tecla de tabulación) centrándose en las casillas de verificación disponibles creadas en la inicialización. Cada uno al pasar el mouse mostrará la identificación correspondiente con una información sobre herramientas.
Cuando presione Entrar, marcará la casilla de verificación actualmente activa y agregará un nuevo elemento de lista en la lista, correspondiente a la identificación de la casilla de verificación seleccionada. Si presiona Supr, desmarcará la casilla de verificación y eliminará el elemento de la lista correspondiente.
Dado que la acción se realiza en la casilla de verificación que tiene el foco, la función de eliminación solo funcionará en la última agregada. Si se solicita, podría volverse más potente fácilmente, pero el orden de las opciones seleccionadas ya no estará garantizado.
El teclado controlará el enfoque haciéndote rotar a través de las casillas de verificación.
const target = document.getElementById('target'); for(i=301;i<359;i++){ const o = document.createElement('input'); o.setAttribute('type','checkbox'); o.setAttribute('title',`id:${i}`); o.value = i; o.addEventListener('keydown', absent); o.addEventListener('click', (event)=>{event.preventDefault();}); target.append(o); } document.querySelector('#target input:first-child').focus(); function absent(e){ if(!e.target.checked && e.key=="Enter"){ const list = document.querySelector("#students ol.list"); const item = document.createElement('li'); item.innerText = e.target.value; list.append(item); e.target.checked = true; } if(e.target.checked && e.key=="Backspace"){ const lastItem = document.querySelector("#students ol.list li:last-child"); if(lastItem.innerText != e.target.value) return; lastItem.remove(); e.target.checked = false; } if(e.key=="Tab" && e.target.nextSibling == null) document.querySelector('#target input:first-child').focus(); } body { background-color: blanchedalmond; } h1{ color: crimson; font-weight: 700; font-size: 60px; text-align: center; } h2 { color: blue; } #students{ margin: 0 2rem 1rem 2rem; padding: 0 20px; border: dashed 2px gray; } .list{ } #target{ margin: 0 2rem; padding: 20px; border: dashed 2px gray; } input[type=checkbox]{ cursor: pointer; } <body> <h1>Attendance</h1> <div id="students" tabindex="-1"> <h2>Present Students</h2> <ol class="list"> </ol> </div> <div id="target"> </div> </body>