Make checkbox functional with Enter key

Question

I'm trying to make the checkbox behave with the Enter key (when tabbed into) the same way it usually does with the space bar or when clicked. I cooked up a case where the checkbox is indeed being checked, but it then doesn't act like it should, i.e. I want it to display a previously hidden text and disappear itself. How can I achieve this? Adding something like document.getElementById("myCheck").click() doesn't work, though.

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>

A bit unconventional, but since the OP already came up with listening to `'keydown'`, within the handler function, the only thing left is to change the current `e.target.checked = !e.target.checked;` to `e.target.click();`. And maybe change listening from `'keydown'` to `'keyup'` — Peter Seliger, May 30 '22 at 20:16
There's some good discussion on this subject plus examples of other solutions in this previous question: https://stackoverflow.com/questions/19676525/check-checkbox-and-trigger-change-event-javascript I would be kinda wary of this "enter" functionality though as its non-standard for keyboard users who will be used to the spacebar doing that job. — omid, May 30 '22 at 20:22

score 1 · Accepted Answer · answered May 30 '22 at 20:17

All you need to do is trigger the click event, that will check the box. If you manually set checked and then trigger click it will undo the manual setting.

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>

Make checkbox functional with Enter key

1 Answers1