如何使用按键属性操作复选框？
如何使用按键属性操作复选框？
提问于 2022-07-15 11:58:18
我想勾选复选框时，输入，按下，输出应该显示在行标签中，同样，在按下退格后，复选框应该取消勾选，元素必须从行中移除。但我怎么能做到呢？而不使用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
Stack Overflow用户
发布于 2022-07-15 12:12:46
在您的|| 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>
Stack Overflow用户
发布于 2022-07-15 12:41:34
下面是一个演示，您可以在其中导航(使用选项卡键)，焦点放在初始化时创建的可用复选框上。悬停时的每一个都会显示相应的id和工具提示。
当您按Enter时，它将勾选当前活动的复选框，并在列表中添加一个新的列表项，对应于选中的复选框id。如果按del，它将取消复选框并删除相应的列表项。
由于该操作是在具有焦点的复选框上执行的，因此remove功能将只在最后一个添加的选项上工作。如果请求，它可以很容易变得更强大，但所选选项的顺序将不再得到保证。
键盘将控制焦点，使您在复选框中旋转。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72993634
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号