Show or hide input field based on checkbox using jQuery

In many times it is required to show an HTML input field to the user depending upon the checkbox. In most of the cases when the user checks an input checkbox field, a new input field appear to the user. Here in this post, we are going to see how to do something like this.

Today we are going to see how to show or hide an input text box depending on the checkbox. We will check if the checkbox is checked or not. If it is checked, the text input box will be visible and after it unchecked, it will again hide.

Below is the HTML code:

<input type="checkbox" name="showField" id="showField" value="yes" onchange="myFunction()">Display your name<br/>

<span id="nameField">Your full name:<input type="text" name="fullName" id="fullName"></span>

In the above code, we have take two input field. The first one is a checkbox, which will be responsible to show or hide an input textbox field.

Also, you need to include the jQuery file:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

Now below is the JavaScript code:

$('#nameField').css('display','none'); // Hide the text input box in default
function myFunction() {
 	if($('#showField').prop('checked')) {
         $('#nameField').css('display','block');
       } else {
   	    $('#nameField').css('display','none');
       }
}

In the above JavaScript/jQuery code, you can see that we have first checked if the checkbox is checked or not. Before we start our JavaScript function, we have added the code to hide the input text box in default. After the page will load, the text box will be hidden. When a user checks the checkbox, the field will be visible. After you uncheck the checkbox, the input field will be again hidden.

Disable right click, copy, cut on web page using jQuery

Make a div element draggable using jQuery UI

Well, this tutorial is nothing but show/hide element depending upon an HTML checkbox. We are just applying it where the HTML input text box is so that it will be shown and hidden based on the checkbox.

To show or hide the field, we are applying CSS through jQuery css() method. We are passing CSS display property. To hide the field, we set the display property to none and to show it we set the display property block.

---

So you have seen how to show or hide input field depending upon a checkbox field. I hope you like this post.

4 responses to “Show or hide input field based on checkbox using jQuery”

1. Sagar Kumar says:

   November 1, 2020 at 12:27 am

   Best Thing This is Thanking you This is really work so repeat Thanks Thanks Thanks

   Reply
2. Ayoub Khan says:

   March 24, 2021 at 6:09 pm

   Very helpful interested and I have solve my problem

   Reply
3. Moses Holluwablessme says:

   September 17, 2021 at 8:57 pm

   Thanks, After Hours of research.. This solve my problem in a simple way…

   Reply
4. S Jin says:

   January 19, 2022 at 2:36 am

   I am new in HTML programming, so I want to know
   What the complete HTML file are?
   Where I should put the jQuery file?
   And where I should put the JavaScript code?
   Thank you very much.

   Reply