HTML form visible or hidden based on checkbox condition

Question

I want to hide/visible a form based on checkbox in google webapp. If the checkbox is in checked condition then the form will be in visible else it should in hidden. I want to try with below mentioned code block. But not happen.

if (document.getElementById("df1").checked) {
   document.getElementById("co").style.visibility = "hidden";
} else {
   document.getElementById("co").style.visibility = "visible";
}

<form id="co" style="visibility : hidden">
<br>
<label type="text">Name </label><input type="text">
<br>
<label type="text">Roll No. </label><input type="number" value="0" min="0">
<br><br>
<input type="submit" value="submit">

<input type="checkbox" id="df1">

Answer 1

1. Close the form.
2. Move the checkbox outside the form
3. Make a function and use addEventListener on the checkbox

window.addEventListener('load', () => { // when the elements are available
  document.getElementById('df1').addEventListener('click', (e) => {
    const show = e.target.checked;
    document.getElementById("co").style.visibility = show ? 'visible' : 'hidden';
  });
});

<form id="co" style="visibility : hidden">
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">

Using hidden (so the form does not take up space):

window.addEventListener('load', () => { // when the elements are available
  document.getElementById('df1').addEventListener('click', (e) => {
    document.getElementById("co").hidden = !e.target.checked;
  });
});

<form id="co" hidden>
  <label type="text">Name </label><input type="text">
  <br>
  <label type="text">Roll No. </label><input type="number" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">