Hit enter after type your search item

7 demos of jQuery multi-select dropdown with checkboxes plug-in

The multi-select and checkboxes

You might have seen or used multi-select dropdowns in web projects where a user may select multiple choices from the given set of options.

In this tutorial, I am going to show you a jQuery plugin that not only allows selecting multiple options but the options are presented as checkboxes. So, as the dropdown is clicked, the options are opened with checkboxes. A user may check or uncheck any option that will also appear in the box.

The plug-in name is jQuery MultiSelect that you may download at Github website here.

See the following demos for learning how it works and how you may use this in your own web projects.

A demo of using multi select with checkboxes

In this example, four columns multi-select dropdown with checkboxes is created. As you click the dropdown, the US State names will appear with checkboxes. Select a few State names and also see how it is added in the text bar.

jQuery multi select checkbo

See online demo and code

For creating this dropdown with checkboxes, first of all, include the CSS library in the <head> section that comes with the plug-in:

<link href=”css/jquery.multiselect.css” rel=”stylesheet” type=”text/css”>

In the markup section just create a normal dropdown by <select> tag with options:

<select name=”multicheckbox[]” multiple=”multiple” class=”4colactive”>

Include the jQuery and JS file of the plug-in before the </body> tag.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

<script src=”js/multiselect-checkbox/jquery.multiselect.js”></script>

Finally, use the jQuery code for plug-in with options, for example:


 

A demo of two columns multi-select

This is almost the same example as above except I specified two columns in the <script> part rather than four. See the demo and code online:

jQuery multi select checkbox two-columns

See online demo and code

Only this line of code is changed in the first example:


 

That is the columns: 2 option. You may use the number of columns as fits with the design and number of choices.

A demo of using options groups in multi-select

If you have options in categorized way, for example, web -> HTML, JavaScript, CSS etc. and High-level languages like Java, Python etc. in the multi-select dropdown, this is how you may present it with this plug-in:

jQuery multi select option group

See online demo and code

You can see the complete code in the demo page with <select> tag using option groups.

Styling the dropdown with checkboxes

You may style the multi-select dropdown and its text by using the power of CSS. In this example, the Bootstrap CSS file is included in the <head> section and applied in the dropdown.

You can see the difference between the first and this example:

jQuery multi select style

See online demo and code

A demo of changing the color of selected options

For the selected options and the choices that a user hover can be highlighted by a different color to clearly show what has been selected.

For that, you simply need to override the ms-options-wrap > .ms-options > ul classes related to li and label. See the following demo where I have changed the background color of the hovered and selected options:

jQuery multi select hover

See online demo and code

Only this code is added in the <style> section that overridden the default classes in the plug-in’s CSS file:


 

Another style with selected and unselected options

See another style in this demo where unselected options’ properties are also changed.

jQuery multi select CSS

See online demo and code

Similarly, you may pick other classes for textbox or even checkbox and modify to style as you want.

A demo with selectall options

By specifying the selectAll option as true, you may add the option to select all options in the dropdown.

jQuery multi select all

See online demo and code

You may check other options by visiting the documentation of the plug-in.

This div height required for enabling the sticky sidebar