Show Hide TextBox When CheckBox Is Checked Unchecked Using JQuery

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

Here the CheckBox has been assigned a JQuery Click event handler. When 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 JQuery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
          <h3>Show Hide TextBox When CheckBox Is Checked Unchecked Using JQuery</h3>
          <br />
            <div class = "row form-group">  
              <div class="col-md-3">
                  <input type = "checkbox" class="form-control" id="check" name="check">
              </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 () {
            $("#check").click(function () {
                if ($(this).is(":checked")) {
                    $("#name").show();
                } else {
                    $("#name").hide();
                }
            });
        });
    </script>    
</html>

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