Multiselect Dropdown List With Checkboxes – multiselect.js

Category: Form , Javascript | October 7, 2018
Author: mneofit
Views Total: 8,659
Official Page: Go to website
Last Update: October 7, 2018
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 {




  • bugfix

You Might Be Interested In:

12 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?


Leave a Reply