SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Multiselect Checkboxes and Listboxes
By Scott Isaacs

The implementation for handling multiple selection in browsers today using list-box is not very friendly. Novice users need to know to hold down the ctrl or shift key to make multiple selections. In this article, we present a very simple alternative to multi-select list boxes that requires you to make no changes on the server. This alternative has always been apart of HTML but often overlooked by web authors.

First, let's quickly look at a multi-select list box. Multi-select list boxes are created with the HTML SELECT element. To enable multiple selections you need to specify two attributes, the MULTIPLE attribute and a SIZE with the value greater than one.

<SELECT MULTIPLE SIZE=5>
 <OPTION VALUE="o1">Option 1
 <OPTION VALUE="o2">Option 2
 <OPTION VALUE="o3">Option 3
 <OPTION VALUE="o4">Option 4
 <OPTION VALUE="o5">Option 5
 <OPTION VALUE="o6">Option 6
</SELECT>

To select multiple items, you need to hold down the control key for each selected item after the first one. While experienced users are familiar with this user-interface paradigm, for many new users this is not very discoverable.

The alternative is very simple. When you want to create a multi-select element, you create a set of check boxes instead of a list box. When you specify the check boxes give them all the same name. Rewriting our select box above:

<INPUT NAME="options" TYPE="CHECKBOX" VALUE="o1">
  Option 1<BR>
<INPUT NAME="options" TYPE="CHECKBOX" VALUE="o2">
  Option 2<BR>
<INPUT NAME="options" TYPE="CHECKBOX" VALUE="o3">
  Option 3<BR>
<INPUT NAME="options" TYPE="CHECKBOX" VALUE="o4">
  Option 4<BR>
<INPUT NAME="options" TYPE="CHECKBOX" VALUE="o5">
  Option 5<BR>
<INPUT NAME="options" TYPE="CHECKBOX" VALUE="o6">
  Option 6<BR>

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6

This solution creates a different user-interface that accomplishes the same result as the multi-select list box. The real benefit to this alternative is that this is really just a user-interface change that can simplify forms for novice users. The server receives the same values in both cases. The key to this is to make sure all your check boxes are given the same name. When the form is submitted to the server, it creates a set of name-value pairs. So if you were to select option 1 and option 3 from the list box or the check boxes, the server would receive the following information:

options=o1&options=o3

This approach works very well when the number of choices being presented is not very large. For very long lists, this easier user-interface needs to be weighed against the possible clutter of having a large number of check-boxes.

While the server does not care whether you use multiple checkboxes or a list box, your javascripts may require a little bit of tweaking. On the next page we provide a useful function from the book, Inside Dynamic HTML, that makes it easy to access the select items from either element.

Page 1:Multiselect Checkboxes and Listboxes
Page 2:Scripting Multiselect Elements