The Learning Curve


The Form The Analysis The Code


Select All Checkboxes, But...


    Years ago, in the days of MS-DOS, there was a utility program called XTree that allowed you to select items and then reverse the selections with one click. A simple enough task, but unheard of at the time. This script/tutorial shows you how to emulate that capability for checkboxes. The function -- selectAll() -- allows the user not only to select all of the checkboxes with one click, but also to select all but one with just one click.


The Form

  Recipe Name
Vodka Sauce
Tomato Sauce w/Flank Steak
Uncooked Sauce w/Tomatoes
Pesto Sauce
Select All
Inverse All

The Analysis

       To use the script, you simply need to include the function, your checkboxes and two radio buttons. The selectAll() function is passed two arguments by the HTML's onClick event handlers: the form object (FormObj) and a boolean (isInverse). The first parameter allows the function to be used with any form, and the second determines which of the two types of processing will take place.

function selectAll(formObj, isInverse) {

The function begins by using a for loop to traverse the entire form and set each field element to the variable fldObj.

for (var i=0;i < formObj.length;i++){
  fldObj = formObj.elements[i];

To assure that we are only dealing with checkboxes, we test each fldObj type. If it is a checkbox, we continue the processing; else the loop increments and the process begins again.

if (fldObj.type == 'checkbox')

The final three lines are the ones that do the actual selecting. If the isInverse variable is set to true, the field's 'checked' attribute is reversed; that is, if it were true, it becomes false and vice versa. If the isInverse variable is set to false, all of the checkboxes' checked attributes are set to true.

  fldObj.checked = (fldObj.checked) ? false : true;
else fldObj.checked = true;


The Code



The Form The Analysis The Code




Last update: