Select Multiple Elements With Modifier Keys - jQuery MultiSelector

File Size: 7.72 KB
Views Total: 3197
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Select Multiple Elements With Modifier Keys - jQuery MultiSelector

MultiSelector is a very small jQuery plugin that allows multiple DOM elements to be selected with modifier keys (Shift and Ctrl/Command) just like on computer's desktop.

How to use it:

1. Download and place the MultiSelector plugin's script after jQuery library:

<script src="//"></script>
<script src="dist/multiselector.js"></script>

2. Call the main function multiSelector and specify the elements which should be selected.

<ul id="test">

3. More default configuration options.


  // CSS class when selected
  selectedElementClass:   'ms-selected',

  // CSS class of last element
  lastElementClass:       'ms-last',

  // disable selection by mouse
  disableSelection:       true,

  // disbale Shift key
  disableShift:           false,

  // Disable Ctrl key
  disableCtrl:            false,

4. Callback functions which will be triggered before/after selection.


  // Parameters:
  // list: an Array with selected objects
  // parent: target object
  // element: clicked object
  onSelectionStart:       function() {},
  onSelectionEnd:         function() {}


5. API methods:

// select all

// deselect all

// return all the selected elements. 

// disable the plugin

Change log:


  • Added the onClick event object as parameter in callbacks


  • Improved selection combo

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