jQuery Hover Over Sub Checkboxes Plugin - Subcheckbox

Subcheckbox is a simple but useful jQuery plugin that attaches a group of subCheckboxes to a checkbox when your mouse hovers over it.

How to use it:

1. Include jQuery library and jQuery Subcheckbox plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.checkbox-category-dropdown.min.js"></script>

2. The HTML

<ul class="super-category-dropdown">
<div style="width:500px; clear:both; height:50px; margin-top:10px;">
<li>
<input type="checkbox" name="maincheck1" id="maincheck1" />
<label for="maincheck1">Marsupial</label>
<ul>
<li>
<input type="checkbox" name="main1subcheckAll" id="main1subcheckAll" class="select-all" />
<label for="main1subcheckAll">All</label>
</li>
<li>
<input type="checkbox" name="main1subcheck1" id="main1subcheck1" />
<label for="main1subcheck1">Koala</label>
</li>
<li>
<input type="checkbox" name="main1subcheck2" id="main1subcheck2" />
<label for="main1subcheck2">Possum</label>
</li>
<li>
<input type="checkbox" name="main1subcheck3" id="main1subcheck3" />
<label for="main1subcheck3">Kangaroo</label>
</li>
</ul>
</li>
</div>
</ul>

3. The CSS

ul.super-category-dropdown li.ccd-main-item {
float: left;
width: 200px;
list-style-type: none;
}
p {
margin: 0;
}
ul.super-category-dropdown ul {
list-style-type: none;
}
ul.ccd-sub-list {
position: absolute;
border: 1px solid #ff7600;
background-color: #ffffd6;
border-radius: 5px;
padding: 6px;
margin-left: 15px;
}
ul.ccd-sub-list li {
margin: 0;
}
ul.ccd-sub-list-values {
padding: 0;
margin-left: 20px;
}
ul.ccd-sub-list-values li {
display: inline-block;
}
ul.ccd-sub-list-values li p {
margin-right: 5px;
}
ul.ccd-sub-list-values li:last-child p:after {
content: '';
}
ul.ccd-sub-list-values li p:after {
content: ",";
}
</style>

4. Call the plugin

<script>
$(document).ready(function () {
$('ul.super-category-dropdown').checkbox_category_dropdown();			
});
</script>

---

This awesome jQuery plugin is developed by Nostin. For more Advanced Usages, please check the demo page or visit the official website.