Multiselect Widget Demo

Checkboxs list widget improves usability of ordinary multiple-select input controls replacing them with a more intuitive to use, scrollable checklist that allow multiple options to be selected with just the mouse and without taking up a lot of screen.

Demo (normal multiple select box)

In ordinary multi-select form controls, if users need to select multiple items, then they have to click holding down the CTRL key (on Windows, or the command button on Mac). That can get annoying for users, especially with long list of selectable items. For example, see how annoying is to select 3 or 4 countries from the following list.

Select countries from the list:

Demo (Multiselect To Checklist widget applied)

With Checkbox List Widget applied, the usability is enhanced significantly, since the original select multiple is hidden and instead a user-friendly interface is presented with the available options. No Ctrl/Cmd-clicking is necessary to select multiple items, and an accidental clicks are not destructive. More is seen at a glance and less scrolling (if any) is required to see all available options.

Selected values: Array ( )

Select countries from the list:

Submit this form to see te selected values processed by a server side script, for example, a PHP script.

The new widget will keep the replaced select options synchronized with the checkbox list so the postback is not affected in any way. The server side script receives the same values as if the standard select box were being used.

It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There's no extra markup needed.

Features

Search within available options, very useful when there are a lots of them.
No need to change existing HTML controls
Ability to navigate by keyboard
More intuitive to average users than the standard multi-select box.
Cross-browser compatible.
If you have a really long list, it is easy to see if something is selected in the checklist. (The left-border stays highlighted as an indicator, which is very useful for long lists).
Flexible, in the event that there are conflicts with pre-existing CSS class names.
Fully customizable via CSS