Select Multiple Options In A Select With Checkboxes - i9multiselect

Select Multiple Options In A Select With Checkboxes - i9multiselect
File Size: 7.36 KB
Views Total: 233
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

i9multiselect is a dead simple jQuery multi select plugin that allows the user to select multiple options in a select element with checkboxes.

Works with the native select multiple attribute. It enables you to select multiple options by clicking without the need of holding down the Ctrl (Windows) or Command (Mac) button.

How to use it:

1. Load the latest Font Awesome iconic font for check/uncheck icons.

<link rel="stylesheet" href="/path/to/fontawesome/all.css" />

2. Load jQuery library and the jQuery i9multiselect plugin in the document.

<link rel="stylesheet" href="/path/to/i9multiselect.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/i9multiselect.js"></script>

3. Add the i9multiselect class and multiple attribute to the select element:

<select id="select" class="i9multiselect" multiple required>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
  <option value="4">Value 4</option>
  <option value="5">Value 5</option>
  <option value="6">Value 6</option>
  <option value="7">Value 7</option>
  <option value="8">Value 8</option>
  <option value="9">Value 9</option>
  <option value="10">Value 10</option>
</select>

4. Initialize the plugin on the select element and you're done.

$(function(){
  $('select').i9multiselect();
});

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