Show Hide TextBox When CheckBox Is Checked Unchecked Using JavaScript

Here we show how you can show and hide TextBox when CheckBox is checked and unchecked using JavaScript.

Here the CheckBox has been assigned a JavaScript OnClick event handler. When the CheckBox is clicked, the showHide() JavaScript function is executed. Inside this function, based on whether CheckBox is checked or unchecked , the TextBox is show or hide.

Below is example code.

				
					<!DOCTYPE html>
    <head>
        <title>inflay.com | Show Hide TextBox When CheckBox Is Checked Unchecked Using JavaScript</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
          <h3>Show Hide TextBox When CheckBox Is Checked Unchecked Using JavaScript</h3>
          <br />
            <div class = "row form-group">  
              <div class="col-md-3">
                  <input type = "checkbox" class="form-control" id="check" name="check" onclick="showHide()">
              </div>
            </div>
            <div class="row form-group">
              <div class="col-md-4">
                  <input type = "text" class="form-control" name="name" id="name" value="" placeholder="Enter name" style="display:none">
              </div>
            </div>
        </div>
    </body>
    <script>
        function showHide() {
          var check = document.getElementById("check"); // Get the checkbox
          var name = document.getElementById("name");  // Get the text
          // If the checkbox is checked show textbox 
          if (check.checked == true){
            name.style.display = "block";
          } else {
            name.style.display = "none";
          }
        }
    </script>    
</html>

I hope this article helps you.
Thanks for visiting Inflay.com .