Create Animated Multi-Level Checkbox Drop down Using jQuery | Code Snippet #22
Code 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:
- Create Dynamic Checkbox Using Drop Down Selection – jQuery
- Simple CSS3 checkboxes and radio buttons – CSS3
- Get Multi Checkbox values using jQuery
- Select all checkboxes using one checkbox – JavaScript
- Get Multi checkbox values in JavaScript
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.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<ul id="checkboxLists"><li id="title"><b>Multi-Level Checkbox Drop Down</b></li> <div class="list-container"> <li class="parent-checkbox"> <label class="multiLevelCheckbox"> <input id="parentCheckbox" value="1" name="checkboxes[]" type="checkbox"> Drop Down Check Box <span></span> </label> </li> <div id="childCheckboxes"> <li> <label class="multiLevelCheckbox child-location"> <input class="checkbox" value="11" name="checkboxes[]" type="checkbox" style="margin-left:50px;"> Checkbox 1 <span></span> </label> </li> <li> <label class="multiLevelCheckbox child-location"> <input class="checkbox" value="12" name="checkboxes[]" type="checkbox" style="margin-left:50px;"> Checkbox 2 <span></span> </label> </li> <li> <label class="multiLevelCheckbox child-location"> <input class="checkbox" value="13" name="checkboxes[]" type="checkbox" style="margin-left:50px;"> Checkbox 3 <span></span> </label> </li> <li> <label class="multiLevelCheckbox child-location"> <input class="checkbox" value="14" name="checkboxes[]" type="checkbox" style="margin-left:50px;"> Checkbox 4 <span></span> </label> </li> </div> </div></ul><!-- list-container --> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* hide real checkboxes */ .multiLevelCheckbox input { display: none; } /* add new checkboxes */ .multiLevelCheckbox span { width: 15px; height: 15px; float: left; background: url("images/lite-green-check.png"); background-repeat: no-repeat; } .multiLevelCheckbox input:checked + span { background-position:0px -15px; } /* add margin for child cat */ .multiLevelCheckbox.child-location span { margin-left: 50px; } /* add margin for label */ ul { list-style-type:none; } ul#checkboxLists label { padding-left: 10px; } ul#checkboxLists li { min-height: 15px; } #childCheckboxes { display:none; } |
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<script type='text/javascript'>//<![CDATA[ $(function(){ $('li.parent-checkbox label').live('click', function (event) { if($('.parent-checkbox').hasClass("animated")){ /* Wait the animation to be completed */ } else { // Add or remove the open class to know if we need to hide/show the div $('#childCheckboxes').toggleClass("open"); var current_class = $('#childCheckboxes').attr('class'); if (current_class=="open"){ // We show sub-checkboxes // Add this class to cancelled this function onclick $('.parent-checkbox').addClass("animated"); $("#childCheckboxes").stop().show(1000, "easeOutQuart", function() { $('#parentCheckbox').prop('checked', true); // Remove class when the animation is done. $('li.parent-checkbox').removeClass("animated"); $('input[value=1]').prop("disabled", false); }); } else { // We hide sub-checkboxes $('.parent-checkbox').addClass("animated"); $("#childCheckboxes").stop().hide(1000, "easeOutQuart", function() { $('#parentCheckbox').prop('checked', false); // Remove the animated class + enable checkboxes $('li.parent-checkbox').removeClass("animated"); $('input[value=1]').prop("disabled", false); }); } } }); // Multi-Level Drop Down Checkbox // Check and uncheck all child checkboxes from the parent category $('input[value=1]').click(function() { // check all input child of the parent checkbox var checkbox_checkbox_value = $('input[value=1]').is(':checked'); if(checkbox_checkbox_value==true){ $('.checkbox').prop('checked', true).change(); }else{ $('.checkbox').prop('checked', false).change(); } }); // Multi-Level Drop Down Checkbox List Categories // Check and uncheck the parent checkbox if all child are unchecked or checked $('.checkbox').click(function() { // we count the number of children var checkbox_child_number = $('.checkbox').length; // console.log(checkbox_child_number); var count_checkbox = 0; $(".checkbox:checked").each(function() { count_checkbox++; }); // we check the country if(checkbox_child_number==count_checkbox){ $('input[value=1]').prop('checked', true).change(); }else{ $('input[value=1]').prop('checked', false).change(); } }); });//]]> </script> |
jQuery UI Script and CSS are also included along with the jQuery plugin as shown below:
|
1 2 3 |
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> |
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:
|
1 |
$('#childCheckboxes').toggleClass("open"); |
The below method is used to show up the animation:
|
1 |
$("#childCheckboxes").stop().show(1000, "easeOutQuart", function() |
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:
|
1 |
$("#childCheckboxes").stop().hide(1000, "easeOutQuart", function() |
The below function is used to check and uncheck the child checkboxes based on the parent checkbox:
|
1 2 3 4 5 6 7 8 9 |
$('input[value=1]').click(function() { // check all input child of the parent checkbox var checkbox_checkbox_value = $('input[value=1]').is(':checked'); if(checkbox_checkbox_value==true){ $('.checkbox').prop('checked', true).change(); }else{ $('.checkbox').prop('checked', false).change(); } }); |
The below function is used to check and uncheck the parent checkbox based on the child checkbox:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$('.checkbox').click(function() { // we count the number of children var checkbox_child_number = $('.checkbox').length; // console.log(checkbox_child_number); var count_checkbox = 0; $(".checkbox:checked").each(function() { count_checkbox++; }); // we check the country if(checkbox_child_number==count_checkbox){ $('input[value=1]').prop('checked', true).change(); }else{ $('input[value=1]').prop('checked', false).change(); } }); |
Hope you enjoyed this code snippet. If you have any questions, please let us know via comments. Stay tuned for more code snippets.
