Html Question posted in
Some basic documentation can be found here.

HTML form visible or hidden based on checkbox condition

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">
Tags:

4

Answers


  1. 0

    Is this correct?

    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">
 
</form>
 <input type="checkbox" id="df1" onclick="toggleFormVisibility()">
    Login or Signup to reply.
  2. 0

    The issue is because the state of your checkbox is only evaluated when the page first loads. You need to instead attach an event handler to the checkbox so that the DOM can be updated as the checkbox is interacted with.

    Also note that the logic to toggle visibility can be made more simple by using a class.

    Here’s working example:

    const cb = document.querySelector('#df1');
const form = document.querySelector('#co');

cb.addEventListener('change', e => {
  form.classList.toggle('hidden', !e.target.checked);
});
    .hidden {
  visibility: hidden;
}
    <form id="co" class="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">
</form>

<input type="checkbox" id="df1">
    Login or Signup to reply.
  3. 0
    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">
    Login or Signup to reply.
  4. 0 
      const checkbox = document.getElementById('df1');
  const form = document.getElementById('co');

  
  checkbox.addEventListener('change', function() {
    if (checkbox.checked) {
     
      form.style.visibility = 'visible';
    } else {
   
      form.style.visibility = 'hidden';
    }
  });

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Toggle Form</title>
</head>
<body>

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

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

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search