Multi Checkbox Select Plugin In jQuery & Vanilla JS
File Size: | 7.79 KB |
---|---|
Views Total: | 2223 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

multiCheckboxSelect.js is a JavaScript library for beautifying and enhancing the native <select> elements. Compatible with both jQuery and Vanilla JavaScript.
Features:
- Works with the existing select element.
- Allows to load options from a JS array.
- Auto append checkboxes to each options.
- Enable a Parent checkbox to check all option.
See It In Action:
How to use it:
1. Load the stylesheet multi-checkbox-select.css
and JavaScript multi-checkbox-select.js
in the document.
<!-- jQuery Is Optional --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- multiCheckboxSelect.js --> <link rel="stylesheet" href="css/multi-checkbox-select.css" /> <script src="js/multiCheckboxSelect.js"></script>
2. Create an empty select
element if you prefer to load options from a JS array.
<select id="example"></select>
3. Call the function on the select
element and define your own options as follows.
// Options var options = { data: ['option1', 'option2', 'option3'], multiple: true, // enable multi select } // Vanilla JavaScript multiCheckboxSelect('#example', options); // jQuery $('#example').multiCheckboxSelect(options)
4. You can also initialize the multiCheckboxSelect directly on the existing select
element.
<select id="example" multiple> <option value="javascript">JavaScript</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="jquery">jQuery</option> </select>
5. Customize the placeholder & entry text.
var options = { placeholder: 'Select Languages', entryName: 'Language', data: ['JavaScript', 'HTML', 'CSS3', 'jQuery', 'Angular', 'ReactJS', 'VueJS'], multiple: true }
This awesome jQuery plugin is developed by LassassinX. For more Advanced Usages, please check the demo page or visit the official website.