jQuery Hover Over Sub Checkboxes Plugin - Subcheckbox
File Size: | 81.8KB |
---|---|
Views Total: | 834 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.