如何使用 keydown 属性操作复选框？
[英]How to operate checkbox with keydown property?
问题描述
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.不使用 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 个解决方案
解决方案1
0 2022-07-15 12:12:46
Add || event.key == "Delete"添加|| event.key == "Delete" || event.key == "Delete" inside your if brackets, and it will work || event.key == "Delete"在你的if括号内，它会起作用
<!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>
解决方案2
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.这是一个演示，您可以在其中导航（使用 Tab 键），重点是在初始化时创建的可用复选框。 Each one on hover will show the corresponding id with a tooltip.悬停时的每个都会显示相应的 id 和工具提示。
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.当您按下 Enter 时，它将勾选当前活动的复选框，并将在列表中添加一个新的列表项，对应于选中的复选框 id。 If you press del, it will untick the checkbox and remove the corresponding list item.如果按del，它将取消选中复选框并删除相应的列表项。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.