Kevin A. Freitas

Checking multiple boxes with just one stroke

By Kevin A. Freitas

Many websites now utilize forms and checkboxes to allow users to control amazing amounts of information. Whether choosing the features you desire in a new car or nuking armies of spam in your email, checkboxes were probably there. You also probably noticed some option labeled "check all" on these sites and when you clicked it, hazah, your tendons were saved from the strain of many clicks and, like magic, all the related checkboxes were now filled in. This tutorial will show you how to group checkboxes together and toggle their checked/unchecked state via the DOM.

First, we'll set up the structure of our form and checkboxes. The following code is a simple HTML form with 8 options listed. I've grouped the options using the "id" attribute so we can get at them separately.

<form name="vehicle_info">
  <p>
  <input type="checkbox" name="options" id="exterior" value="alloy wheels" /> Alloy wheels<br />
  <input type="checkbox" name="options" id="exterior" value="sunroof" /> Sunroof<br />
  <input type="checkbox" name="options" id="exterior" value="spoiler" /> Spoiler<br />
  <input type="checkbox" name="options" id="exterior" value="racing stripes" /> Racing Stripes<br />
  </p>

  <p>
  <input type="checkbox" name="options" id="interior" value="leather" /> Leather<br />
  <input type="checkbox" name="options" id="interior" value="heated seats" /> Heated Seats<br />
  <input type="checkbox" name="options" id="interior" value="cup holder" /> Cup Holder<br />
  <input type="checkbox" name="options" id="interior" value="bowling lane" /> Bowling Lane<br />
  </p>
</form>

Great. Now we need some way of altering the state of those options. For this we go to some simple DOM-endowed JavaScript.

<script type="text/javascript">
function checkAll(checkWhat) {
  // Find all the checkboxes...
  var inputs = document.getElementsByTagName("input");

  // Loop through all form elements (input tags)
  for(index = 0; index < inputs.length; index++)
  {
    // ...if it's the type of checkbox we're looking for, toggle its checked status
    if(inputs[index].id == checkWhat)
      if(inputs[index].checked == 0)
      {
        inputs[index].checked = 1;
      }
      else if(inputs[index].checked == 1)
      {
        inputs[index].checked = 0;
      }
  }
}
</script>

The function "checkAll" takes one value "checkWhat" that should be used to identify the "id" of the checkboxes you'd like to control. Now you can create a link or two that will do all that hard checking work for you.

<p>
Choose all
<a href="javascript: void(null);" onclick="checkAll('exterior')">Exterior</a> |
<a href="javascript: void(null);" onclick="checkAll('interior')">Interior</a>
</p>

Although we've added a bit of code to help identify groups of checkboxes we've created an incredible amount of flexibility in the varied control we can now assert over our checkboxes. View sample »

Methods gone by

The old way of checking a group of boxes uses the "name" attribute. I've avoided this method because, in this example, I want the actual post information from my checkboxes to all be grouped together. If I wanted the same flexibility to select portions of my checkboxes using the "name" attribute I would now need to compile different sets of data once the form was submitted. Using the DOM and the "id" attribute keeps the form's post information grouped together while allowing the user to have access to selecting portions of the boxes.

(2004-09-15)

« Back to Articles