Documentation
UPDATE
Now supporting keyboard navigation - it behaves almost like an ordinary HTML select element! Try it on demo page.
Class: MultiSelect
This plugin turns your checkbox set into one single multi-select dropdown menu - it actually moves your checkboxes into multi-select list so that your form is still working just as it was before. No server-side script modification needed!
You can also style MultiSelect the way you want with CSS provided with this plugin or just replace it with your own. CSS classes can be set with options, so you don't have to change your existing stylesheet.
MultiSelect method: constructor
new MultiSelect(selector[, options]);
Arguments
- selector - (string, required) CSS selector of the wrapper div
- options - (object, optional) The MultiSelect options. See below
Options
- boxes - (string: defaults to 'input[type=checkbox']) Checkbox selector
- labels - (string: defauts to 'label') Label selector
- monitorText - (string: defaults to ' selected') The text to be shown in the dropdown monitor
- containerClass - (string: defaults to 'MultiSelect') CSS class (styling)
- monitorClass - (string: defaults to 'monitor') CSS class (styling)
- monitorActiveClass - (string: defaults to 'active') CSS class (styling)
- itemSelectedClass: - (string: defaults to 'selected') CSS class (styling)
- itemHoverClass: - (string: defaults to 'hover') CSS class (styling)
Returns
- - MultiSelect - MultiSelect instance
MultiSelect Method: append
Append another checkbox set to turn it into multi-select dropdown. Usefull if you have content added dinamically or if you want to include another checkbox set with different container CSS id/class.
myMultiSelect.append(selector);
Arguments
- selector - (string) - CSS selector of the container div
Changelog
1.3
- partial code rewrite
- added keyboard navigation support
1.2
- added win/mac style images
- CSS enhancements
1.0
- initial release
Demo
Take a look over here.