Select Some Checkboxes JavaScript Function

Posted Jul 24, 2006
Last Updated Nov 10, 2011

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.

Group 1
Group 2
Group 3

Control Checkboxes

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).

Comment

No HTML Tags are permitted.

Valentin

Apr 2, 2011

Doesn't wrok with FF 4

Shawn Olson

Apr 2, 2011

Thanks for the input. I've updated it to work in FF4.

Ketan Chavda

Aug 24, 2009

good code.It can use full.

Lee Firth

May 29, 2008

Code works great, just what I needed. Thanks.

Chauhan Andy

Sep 24, 2007

This does not work with tables. For example if you want to include the whole script with in table, td, tr tags for formatting, it does not work.

Bino B

Sep 11, 2007

there too many simple ways to do this

Iulian Mihai

Jun 27, 2007

Hei mate, I tryed your script and is great, but I try to use this at a asp.net datagrid controle and is not working because asp.net datagrid controle creating an automatical table where I can't add the TBODY tag, What other solution you cand offer me for a good functionality in this case?

kenny g

Apr 10, 2007

how do i use this if i have more than one form on a page?

Donnie Adams

Sep 11, 2006

I can't seem to get the code to work when a table is in the form. I've followed all direction including enclosing the table content in tbody tags. Any chance in posting a working example?
Angry Teapot Level Design Awards

Newsletter Subscription