使用 Enter 键使复选框起作用

Question

我正在尝试使复选框在使用 Enter 键时（当跳入时）的行为与它通常在 space 栏或单击时的行为相同。我编造了一个案例，其中确实选中了复选框，但它并没有像它应该的那样运行，即我希望它显示以前隐藏的文本并自行消失。我怎样才能做到这一点？但是，添加 document.getElementById("myCheck").click() 之类的内容不起作用。

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>

Answer 1

您需要做的就是触发 click 事件，该事件将选中该框。如果您手动设置 checked 然后触发 click 它将撤消手动设置。

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>

使用 Enter 键使复选框起作用

Make checkbox functional with Enter key

html

javascript