jQuery Hide Show Textbox Examples

Many times it may have happened that you wanted to use jQuery to Hide/Show text boxes when a checkbox is checked or a button is clicked. This article will show you how to use jQuery to Show / Hide Textbox when checkbox is checked.

How to Hide  Or Show Textbox using jQuery – Examples

In order to see how to show textbox or hide textbox using jQuery when checkbox is checked, lets assume that we have a textbox and few checkboxes. So here it goes:

Example: Show / Hide Textbox when checkbox is checked using jQuery

<input type="checkbox" class="hide" /><input type="text" value="Name" /><br>
<input type="checkbox" class="hide" /><input type="text" value="Email" /><br>
<input type="checkbox" class="hide" checked="checked" /><input type="text" value="Address" /><br>

<script type="text/javascript">
$(document).ready(function() {

$('.hide').click(function() {
$(this).next().toggle();
});
$('.hide:checked').next().hide();

});
</script>

This third input box is for the Address and it is hidden by default when the page loads. This is achieved by simply marking its “checked” attribute as “checked”. Just refer to the third input element’s HTML code to understand this. The corresponding jQuery code to achieve this is:

$('.hide:checked').next().hide();

Don’t forget to include your own version(preferably latest) of jQuery. Unless you have included a call to the jQuery framework, this demo will not work. Hope this helps.

Your turn!

Do you know of any other ways to use jQuery to Show / Hide textbox? Please feel free to share by commenting below.