Create Animated Multi-Level Checkbox Drop down Using jQuery | Code Snippet #22

13 Feb , 2014  Code Snippets 

Animated CheckboxesCode Snippet #22:  The code snippet we found today helps us to generate dynamic multi-level checkbox drop downs by checking a parent checkbox with the help of jQuery.

We have previously seen many tutorials on checkboxes using JavaScript and jQuery. Today, we are going to learn how to display multi-level checkboxes sliding down in an animated fashion when a parent checkbox is checked. We use jQuery prop() method to check whether the parent checkbox was checked or not.

Other checkbox code snippets we have are:

What exactly the code snippet today can do?

We create a master checkbox with 4 child checkboxes to it. Initially, all the child checkboxes are hidden and only the parent checkbox is displayed. When the user checks the master checkbox all the child checkboxes are displayed with a sliding animation. All the child checkboxes are checked. If you uncheck any of the child checkbox, the master checkbox is also unchecked. The checkboxes are displayed with the help of image. We are using images to display the checkbox.

You can view the live demo below: (Tested on Chrome and Firefox) Download the Checkbox Image from here. 

VIEW DEMO In SEPARATE WINDOW

HTML:

CSS:

jQuery:

jQuery UI Script and CSS are also included along with the jQuery plugin as shown below:

Explanation:

We will try to give an overview of how the code works here. The checkboxes are replaced with image using CSS. In the jQuery, when the parent checkbox is clicked, a click even is generated. If animation in progress, do nothing. If there is no animation, then start the animation. We use the toggleClass() method to toggle the child checkboxes as shown below:

The below method is used to show up the animation:

When the parent checkbox is clicked again, all the checkboxes needs to hide back again along with the animation of slide up using the below function:

The below function is used to check and uncheck the child checkboxes based on the parent checkbox:

The below function is used to check and uncheck the parent checkbox based on the child checkbox:

Hope you enjoyed this code snippet. If you have any questions, please let us know via comments. Stay tuned for more code snippets.



, , , ,

Comments are closed.