Simple jQuery Checkbox category View
Multiple Checkbox With Select All
Multiple Checkbox With Jquery
HTML Page :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Multiple Checkbox With category (Parent-Child Elements) - Simple jQuery Checkbox category View</title>
<!--Include the javascript library inside head section of your page.-->
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<!-- Include jquery code on window.load -->
<script type='text/javascript'>
//
<![CDATA[
$(window).load(function () {
$(document).ready(function () {
$.extend($.expr[':'], {
unchecked: function (obj) {
return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
}
});
$("#category input:checkbox").live('change', function () {
$(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));
for (var i = $('#category').find('ul').length - 1; i >= 0; i--) {
$('#category').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
});
}
});
});
});//]]>
</script>
</head>
<body>
<div id="category">
<p>Create a checkbox category view using nested unordered lists.</p>
<ul>
<li>
<input type="checkbox" />
Cell Phone (Main Category)
<ul>
<li>
<input type="checkbox" />
Microsoft (Category)
<ul>
<li>
<input type="checkbox" />
Lumia 1 (Sub-Category)
</li>
<li>
<input type="checkbox" />
Lumia 2 (Sub-Category)
</li>
<li>
<input type="checkbox" />
Lumia 3 (Sub-Category)
</li>
</ul>
</li>
<li>
<input type="checkbox" />
Samsung (Category)
<ul>
<li>
<input type="checkbox" />
Samsung S4 (Sub-Category)
</li>
<li>
<input type="checkbox" />
Samsung S6 (Sub-Category)
</li>
</ul>
</li>
<li>
<input type="checkbox" />
Moto (Category)
<ul>
<li>
<input type="checkbox" />
Moto G (Sub-Category)
</li>
<li>
<input type="checkbox" />
Moto Z (Sub-Category)
</li>
<li>
<input type="checkbox" />
Moto Y (Sub-Category)
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>