HTML 表单根据复选框条件可见或隐藏

Question

我想隐藏/显示基于 google webapp 中复选框的表单。如果复选框处于“选中状态”，则表单将可见，否则应隐藏。我想尝试使用下面提到的代码块。但不会发生。

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

function toggleFormVisibility() {
  const form = document.getElementById("co");
  form.style.display = document.getElementById("df1").checked ? "block" : "none";
}

<form id="co" style="display: none">
  <br>
  <label for="name">Name</label>
  <input type="text" id="name">
  <br>
  <label for="rollNo">Roll No.</label>
  <input type="number" id="rollNo" value="0" min="0">
  <br><br>
  <input type="submit" value="submit">
  <input type="checkbox" id="df1" onclick="toggleFormVisibility()">
</form>