Inside Technique : Simple Selection in Forms : Selection in Lists

If you expect users to select many items from the list we created two simple functions that you should enable. These functions help the user select all the items in the list and none of the items. In addition, while less useful, we also created a function that can reverse the selection.

To demonstrate, experiment with the checkboxes and buttons below.

The HTML for this demonstration is as follows. When creating a group of checkboxes they all should have the same name. To distinguish between the items on the server, you should make sure each checkbox has a unique value.

<FORM>
<INPUT 
  TYPE=button 
  VALUE="Select All" 
  ONCLICK="selectAll(this.form.demo,true)">
<INPUT 
  TYPE=button 
  VALUE="Clear All" 
  ONCLICK="selectAll(this.form.demo,false)">
<INPUT 
  TYPE=button 
  VALUE="Reverse" 
  ONCLICK="reverseAll(this.form.demo)">

<P>
<INPUT  
  TYPE=checkbox 
  NAME=demo 
  VALUE="item0">
<INPUT 
  TYPE=checkbox 
  NAME=demo 
  VALUE="item1">
<INPUT 
  TYPE=checkbox 
  NAME=demo 
  VALUE="item2">
<INPUT 
  TYPE=checkbox 
  NAME=demo 
  VALUE="item3">
<INPUT 
  TYPE=checkbox 
  NAME=demo 
  VALUE="item4">
</FORM>

Our functions also work with multiple choice listboxes. Outside of presentation there is really very little difference between creating a list of checkboxes or a multiple choice listbox.

The HTML for this demonstration is very similar to the checkbox solution.

<FORM>
<INPUT 
  TYPE=button 
  VALUE="Select All" 
  ONCLICK="selectAll(this.form.demo,true)">
<INPUT 
  TYPE=button 
  VALUE="Clear All" 
  ONCLICK="selectAll(this.form.demo,false)">
<INPUT 
  TYPE=button 
  VALUE="Reverse" 
  ONCLICK="reverseAll(this.form.demo)">

<SELECT 
  MULTIPLE 
  NAME=demo 
  SIZE=6>
<OPTION 
  VALUE="option1">Option 1 
<OPTION 
  VALUE="option2">Option 2 
<OPTION 
  VALUE="option3">Option 3 
<OPTION 
  VALUE="option4">Option 4 
<OPTION 
  VALUE="option5">Option 5 
<OPTION 
  VALUE="option6">Option 6 
</SELECT>
</FORM>

We created both these demonstrations using the same selectAll and reverseAll functions. Both functions take the array of form inputs that make up the list. Passing this array is as simple as referencing the input element on the form. In the above examples, we gave each element in the checkbox the same name so passing in the array was as simple as passing in the this.form.demo. In the multiple-choice listbox demonstration all you need to do is pass in the SELECT element.

We were able to accomodate both the listbox and checkbox list by treating them both the same way. With a checkbox, the checked property determines whether it is selected or not. In a multiple-choice listbox the selected property determines whether it is selected. Since JavaScript allows you to expand objects with custom properties, we ignore the differences and assign the values to both properties simplifying the function:

function selectAll(cbList,bSelect) {
  for (var i=0; i<cbList.length; i++) 
    cbList[i].selected = cbList[i].checked = bSelect
}

function reverseAll(cbList) {
  for (var i=0; i<cbList.length; i++) {
    cbList[i].checked = !(cbList[i].checked) 
    cbList[i].selected = !(cbList[i].selected)
  }
}

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.