Multi Checkbox Select Plugin In jQuery & Vanilla JS

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.