How to operate checkbox with keydown property?
Question
I want to tick the checkbox when enter pressed and output should be display in line tag similarly after pressing backspace checkbox should be unticked and element must remove from line. but how can i do that? without using 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>
2 answers
solution1
0 2022-07-15 12:12:46
Add || event.key == "Delete" || event.key == "Delete" inside your if brackets, and it will work
<!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>
solution2
0 2022-07-15 12:41:34
Here's a demo where you can navigate (using tab key) with focus over the available checkboxes created at initialization. Each one on hover will show the corresponding id with a tooltip.
When you press Enter it will tick the currently active checkbox and will add a new list item in the list, corresponding to the checkbox id selected. If you press del, it will untick the checkbox and remove the corresponding list item.
Since the action gets performed on the checkbox having focus, the remove feature will work only on the last one added. If requested it could be easily get more powerful but the order of selected options won't be guaranteed anymore.
The keyboard will control focus making you rotate through the checkboxes.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.