Pete Goodman Web developer

Labs - HTML forms - Select all checkbox

Wednesday 10th September 2008, 19:38

'Select All' checkbox

When a long form is necessary on a page, it can be daunting (not to mention time-intensive) for a user to fill it out completely. This script allows a 'parent' checkbox to control the input value of many child checkboxes, potentially saving time and energy clicking each one individually.

View javascript file

select all 

<form method="get" action="" name="testform" id="testform">
	<fieldset>
		<legend>select all</legend>

		<div class="inputcontainer">
			<label for="checkboxall">Select all?</label>
			<input type="checkbox" name="checkboxall" id="checkboxall" />
		</div>

		<div id="childboxes">
			<div class="inputcontainer">
				<label for="textfield1">Option 1:</label>
				<input type="checkbox" name="checkbox" id="checkbox1" />
			</div>
			<div class="inputcontainer">
				<label for="textfield2">Option 2:</label>
				<input type="checkbox" name="checkbox" id="checkbox2" />
			</div>
			<div class="inputcontainer">
				<label for="textfield3">Option 3:</label>
				<input type="checkbox" name="checkbox" id="checkbox3" />
			</div>
			<div class="inputcontainer">
				<label for="textfield4">Option 4:</label>
				<input type="checkbox" name="checkbox" id="checkbox4" />
			</div>
			<div class="inputcontainer">
				<label for="textfield5">Option 5:</label>
				<input type="checkbox" name="checkbox" id="checkbox5" />
			</div>
		</div>
	</fieldset>
</form>

The function call to enable this is straightforward. It takes two parameters:

  • parentcheckbox - the id of the parent check box that toggles the rest
  • childboxcontainer - the id of the html container for all child checkboxes

// initialise the 'select all' checkbox
formUtil.toggleCheckboxes('checkboxall', 'childboxes');

Comments

Be the first person to comment on this lab...

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.