Update Notice

This script was updated on April 2, 2011 to add compatibility with Firefox 4.

My checkUncheckAll() JavaScript function has been a very popular download over the last couple of years. Many webmasters have asked for a more powerful function that allows control over what checkboxes will get checked or unchecked. Well I have finally bent in and created one:

function checkUncheckSome(controller,theElements)

checkUncheckSome() allows you to define a list of elements that are tied to a controller checkbox defined by 'controller'. Simply enter the id of the controller and then enter a comma seperated list of elements in theElements (use the IDs of the elements).

I have added this function to <script type="text/javascript" src="http://www.shawnolson.net/scripts/public_smo_scripts.js"></script> for public usage. Below are examples of the function in action. Please include credit when using this script and read this site's Terms & Conditions before using.

Checkbox Function Example

Use the Control Checkboxes to control which checkboxes get checked.

Code for Form Above

<form id="theForm" name="theForm">
<fieldset id="group1">
<legend>Group 1</legend>
<label for="AA">A</label>
<input type="checkbox" id="AA" name="AA" value="1"/>
<label for="BB">B</label>
<input type="checkbox" id="BB" name="BB" value="1"/>
<label for="CC">C</label>
<input type="checkbox" id="CC" name="CC" value="1"/> </fieldset>
<fieldset id="group2">
<legend>Group 2</legend>
<label for="DD">D</label>
<input type="checkbox" id="DD" name="DD" value="1"/>
<label for="EE">E</label>
<input type="checkbox" id="EE" name="EE" value="1"/>
<label for="FF">F</label>
<input type="checkbox" id="FF" name="FF" value="1"/>
</fieldset>
<fieldset id="group3">
<legend>Group 3</legend>
<label for="GG">G</label>
<input type="checkbox" id="GG" name="GG" value="1"/>
<label for="HH">H</label>
<input type="checkbox" id="HH" name="HH" value="1"/>
<label for="II">I</label>
<input type="checkbox" id="II" name="II" value="1"/>
</fieldset>
<fieldset>
<legend>Control Buttons</legend>
<label for="testA">Group 1</label>
<input type="checkbox" id="testA" name="testA" onclick="checkUncheckSome('testA','group1')"/>
<label for="testB">Group 2</label>
<input type="checkbox" id="testB" name="testB" onclick="checkUncheckSome('testB','group2')"/>
<label for="testC">A, E, I</label>
<input type="checkbox" id="testC" name="testC" onclick="checkUncheckSome('testC','AA,EE,II')"/>
<label for="testD">Group 1 & Group 3</label>
<input type="checkbox" id="testD" name="testD" onclick="checkUncheckSome('testD','group1,group3')"/>
<label for="testE">C, E & Group 3</label>
<input type="checkbox" id="testE" name="testE" onclick="checkUncheckSome('testE','CC,EE,group3')"/>
</fieldset>
<input type="reset" value="reset"/>
</form>

This function is useful for forms that have complex options that require various groupings of checkboxes.

Considerations

Iteration. The function will only iterate through items that have unique IDs.

Overlapping Controllers. If you happen to have controllers that overlap checkboxes... you may get undesired results. Using the example above, if you click "Group 1" and "Group 1 & 3" then uncheck "Group 1 & 3"... Group 1 will get unchecked. It's not necessarily a flaw in the function... but it is something to keep in mind. I may program another function that allows you to pass an array of controllers if enough webmasters require such a function.

Regarding Tables. If you have a table inside of your form, you must include a <tbody> around your content (and the TBODY must have an ID).