Multiselect Dropdown List With Checkboxes – multiselect.js

Category: Form , Javascript | April 9, 2020
Author: mneofit
Views Total: 8,799
Official Page: Go to website
Last Update: April 9, 2020
License: MIT


Multiselect Dropdown List With Checkboxes – multiselect.js


multiselect.js is an unobtrusive JavaScript plugin that converts the native select box into a multi-select control with checkboxes and check all button.

How to use it:

Include the stylesheet ‘multiselect.css’ in the head section of the webpage.

<link href="multiselect.css" rel="stylesheet">

Create a normal ‘multiple’ select element on the webpage.

<select id='testSelect1' multiple>
  <option value='1'>Item 1</option>
  <option value='2'>Item 2</option>
  <option value='3'>Item 3</option>
  <option value='4'>Item 4</option>
  <option value='5'>Item 5</option>

Include the JavaScript file ‘multiselect.min.js’ at the bottom of the webpage.

<script src="multiselect.min.js"></script>

Activate the plugin and done.


Override the default styles in the ‘multiselect.css’ as per your needs.

.multiselect-wrapper {




  • Fixed initial select


  • Fixed deselect issue
  • Fixed: Does not refresh when original select box gets new attributes
  • Easier way to set width


  • bugfix

You Might Be Interested In:

16 thoughts on “Multiselect Dropdown List With Checkboxes – multiselect.js

  1. Lakshmi

    How to deselect all the check boxes grammatically? How to get the list of selected check boxes?

  2. Ashraf Khunduqji

    the deselect all is not working…
    make multiselect box displayed -> check select all-> then uncheck select all -> you will see that elements still selected
    if you uncheck options one by one then you will find that options will be unselected normally

  3. Ashraf Khunduqji

    Please fix the bug for function _performSelectAll by adding
    self._item.options[e.index].selected = false;
    Otherwise when you uncheck Select All, it will perform the uncheck but inside the real select box items will remain selected which will return inaccurate results

  4. luca

    with php I get the whole array back and not only selected items

  5. Alexandre DUPUIS

    Thanks Ashraf, I have applied your code and it works now.

    See b._item.options[d.index].selected = false in line below :

    _performSelectAll:function(a,b){var c=b._getItems();a.checked?(b._itemCounter=c.length,m_helper.each(c,function(d){m_helper.setActive(d.multiselectElement.parentElement.parentElement),[d.index]),m_helper.check(d.multiselectElement)})):(b._itemCounter=0,m_helper.each(c,function(d){d.multiselectElement.parentElement.parentElement.classList.remove(‘active’),b._item.options[d.index].removeAttribute(‘selected’),b._item.options[d.index].selected = false,m_helper.uncheck(d.multiselectElement)}))}

    1. Amol

      Hi Alexandre/Ashraf,

      I have updated the code as you mentioned above; still when I unselect all; and select only a few from the drop down and click submit it selects all and returns me the result. But from the second time it works fine. am I missing anything? Can you please help?


      1. Amol

        Also; by default; how can I have an un-selected list of items in the drop down?

  6. Frank Paprosky

    Thanks for this tool, but there’s a bug in the _performSelectAll function,

    Check the comment line :

    else {
    self._itemCounter = 0;
    m_helper.each(items, function(e) {
    // Here we need to put the option seleted to false otherwise this option item will be posted.
    self._item.options[e.index].selected = false;

  7. mike

    Is there an easy way to disable the Select All functionality?

  8. Mike

    Is there a simple way to disable the Select All functionality?


Leave a Reply