Select Some Checkboxes JavaScript Function
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).
More in the Free Useful Javascripts Series
- Altering CSS Class Attributes with JavaScript
- Change HTML Styles with JavaScript
- Select Some Checkboxes JavaScript Function
- Select All Checkboxes in a Form with JavaScript
- Get a Form Element's Label with JavaScript
- Select Radio Inputs JavaScript
- UseMaps Crash IE When Changed
- Hide Select Menus JavaScript
- Manipulating Element Styles Based on CSS Classes Using Prototype
- Search for JavaScript articles similar to "Select Some Checkboxes JavaScript Function.
- Search all articles similar to "Select Some Checkboxes JavaScript Function".
- List JavaScript articles from all authors.
Comments on Select Some Checkboxes JavaScript Function
Ketan Chavda said:
good code.It can use full.
Lee Firth said:
Code works great, just what I needed. Thanks.
Chauhan Andy said:
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 said:
there too many simple ways to do this
Iulian Mihai said:
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 said:
how do i use this if i have more than one form on a page?
Donnie Adams said:
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?
