If you are a looking for an easy way to select all checkboxes on a page, there are a number of ways you can quickly accomplish this with the Prototype JS library.

Let's say your HTML looks like this:

  <form id="options">
    <fieldset><input type="text" value="test"></fieldset>
    <fieldset><input type="checkbox" value=0> 0</fieldset>
    <fieldset><input type="checkbox" value=1> 1</fieldset>
    <fieldset><input type="checkbox" value=2> 2</fieldset>
    <fieldset><input type="checkbox" value=3> 3</fieldset>
  </form>

It's fairly straight forward to grab all of the input elements of type "checkbox" without also getting the element of type "text".

In both cases we will store our results as objects in an array, named checkboxes.

var checkboxes = [];

Now that we have this array ready for our objects, let's select them.

The first method, uses the $$ operator to select all inputs on the page. Then we use the each() method to iterate through each input element and check the type. If our type is equal to the string 'checkbox', store it to our array checkboxes.

checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });

The second method, uses the hand Form object method called getInputs(). To use this method, first we need to select the form object. In this example, we do so by used the $ operator and the id attribute of the form. Once we have that object, we call the getInputs() method and pass it the argument 'checkbox', which will define the input type we are seeking.

var form = $('options');
checkboxes = form.getInputs('checkbox');

In both of these cases, checkboxes will be equal to:

checkboxes // ---> returns "[input 0, input 1, input 2, input 3]"

If you would like to check all of these checkboxes, you can do so with this line of code:

checkboxes.each(function(e){ e.checked = 0 });

You can also assign it to a link with this HTML:

<a href="#" onclick="checkboxes.each(function(e){ e.checked = 0 });">Select All</a>

Related Posts

This entry was posted on Thursday, July 10th, 2008 at 3:13 pm and is filed under DHTML, Forms, JavaScript, Prototype, XHTML.