toggle(show/hide) element based on checkbox checked state in jquery

Today i will show you how you can a simple toggle checkbox to show or hide element when it is checked or unchecked respectively. This  can be acheived either by using simple javascript or by using jquery. The html element will be set to hidden initially by setting the “display” property to “none”. Below is the html form code:

As you can see above when ever the checkbox checked state will be changed a javascript function “onCheckboxChanged” will be called which will take checkbox checked state as a parameter this function is included in an external javascript file(included in the source). I have also linked an external stylesheet to make the form look nicer. Below is the code:

Below is the code for scripts.js file.

The above function will be called whenever the checked property of the checkbox will be  changed. It has very simple jquery code. if the checkbox was checked it displays the html row using the “fadeIn” function and the checkbox is unchecked it hides the row using “fadeOut” function.

If the checkbox in unchecked the form will be like this.

When checkbox is unchecked And if the checkbox is checked the form will be like.When checkbox is checked 
You can watch the video tutorial below :

You can download the source files by clicking the button below.

Download Source

Drop your questions and suggesions in the comments. Until next time Happy Coding 🙂

11 thoughts on “toggle(show/hide) element based on checkbox checked state in jquery

  1. Alva Loser

    After going over a handful of the blog articles on your site, I truly appreciate your technique of blogging. I book-marked it to my bookmark website list and will be checking back in the near future. Take a look at my website too and let me know your opinion.


Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge