http://www.insidedhtml.com/tips/html/ts16/page2.asp
Whether you use a multi-select list box or multiple check boxes the server receives the same information. However, if you use JavaScript on your page, you need to manipulate the form elements slightly differently. Below are scripts from Chapter 10 of the book Inside Dynamic HTML that makes multiple checkboxes and multi-select list boxes work the same way.
Scripting Multiple-Select List Boxes
Multiple-select list boxes allow the user to select more than one item from a list. In a multiple-select list box, the value property returns only the first selected item. To determine all the selected items, the entire list of options must be enumerated using a script. The following function demonstrates how to build an array of selected items for any list box. (If you use this function with a single-select list box, the resulting array will contain only a single value.)
<SCRIPT LANGUAGE="JavaScript">
function getSelected(opt) {
var selected = new Array();
var index = 0;
for (var intLoop=0; intLoop < opt.length; intLoop++) {
if (opt[intLoop].selected) {
index = selected.length;
selected[index] = new Object;
selected[index].value = opt[intLoop].value;
selected[index].index = intLoop;
}
}
return selected;
}
</SCRIPT>
Using Check Boxes for Small Lists
If the number of options is small, it might make more sense to use a set of check boxes instead of a multiple-select list box. By sharing the same name across each check box in the set, the check boxes will have the same submit behavior as the multiple-select list box. The preceding function can be rewritten as shown in the following code to determine which check boxes are selected. Rather than enumerating the options collection contained in the Select element, however, you must enumerate the Form elements with a given name. Instead of passing an options collection to the function, the collection of check boxes is used. Another distinction is that check boxes expose a checked property for determining whether they are selected, while the list box uses the selected property, so the conditional logic in the function tests for either selected or checked.
<HTML>
<HEAD>
<TITLE>Multiple-Select Check Boxes</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getSelected(opt) {
var selected = new Array();
var index = 0;
for (var intLoop = 0; intLoop < opt.length; intLoop++) {
if ((opt[intLoop].selected) ||
(opt[intLoop].checked)) {
index = selected.length;
selected[index] = new Object;
selected[index].value = opt[intLoop].value;
selected[index].index = intLoop;
}
}
return selected;
}
function outputSelected(opt) {
var sel = getSelected(opt);
var strSel = "";
for (var item in sel)
strSel += sel[item].value + "\n";
alert("Selected Items:\n" + strSel);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ColorSelector">
<INPUT TYPE=CHECKBOX NAME="color" VALUE="Red">Red
<INPUT TYPE=CHECKBOX NAME="color" VALUE="Navy" CHECKED>Navy
<INPUT TYPE=CHECKBOX NAME="color" VALUE="Black">Black
<INPUT TYPE=CHECKBOX NAME="color" VALUE="White" CHECKED>White
<INPUT TYPE=BUTTON VALUE="Selected Check Box Items"
ONCLICK="outputSelected(this.form.color);">
<P>
<SELECT NAME="multistore" SIZE=3 MULTIPLE>
<OPTION VALUE="Computer" SELECTED>Computer</OPTION>
<OPTION VALUE="Bookstore">Book Store</OPTION>
<OPTION VALUE="MailOrder" SELECTED>Mail Order</OPTION>
</SELECT>
<INPUT TYPE=BUTTON VALUE="Selected List Items"
ONCLICK="outputSelected(this.form.multistore.options)">
</FORM>
</BODY>
</HTML>
