Show Hide TextBox When CheckBox Is Checked Unchecked Using JavaScript

Show Hide TextBox When CheckBox Is Checked Unchecked Using JavaScript

Java Script / By

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 .