Change hidden checkbox through label.

Demo on how a user can change a hidden checkbox input element using a label.

by wilt

HTML

<label>
  <input id="checkbox" type="checkbox"/>
  label for hidden checkbox
</label>

CSS

input[type="checkbox"] {
  visibility: hidden;
}

label {
  font-weight: bold;
}

JavaScript

const onChange = (event) => {
  console.log(event);
  const checkbox = event.target;
  alert("checkbox value is: " + checkbox.checked);
}

document.getElementById('checkbox').addEventListener('change', onChange);