Logo
Navigation
Home Libraries Gadgets Best Practices jQuery Tips Support Resources / Links JS Knowledge Base Donate! About Me AJAX Toolbox
Libraries
Calendar Popup Checkbox Group Data Dumper Data Validation Date Functions DHTML Tree Draggable Iframes Dependent Select Boxes Form Functions Object Position Option Transfer Popups (In-Page DIV) Selectbox Functions Table Sorting And Utils Util/DOM/CSS/Event
doctype [?]
[strict] [loose] [none]

Check Box Groups
Examples

Example 1

This example shows a checkbox group where the user can select a limited number of options.
Clicking on any option automatically checks the control box, indicating at least one is selected.
Boxes are added to the group by using a wildcard name of "color*".

Yes, I would like to receive a new car. My two color choices are:
      Red
      Blue
      Green
      Yellow
<view/hide code> 
<script type="text/javascript">
var colorGroup = new CheckBoxGroup();
colorGroup.addToGroup("color*");
colorGroup.setControlBox("colorAll");
colorGroup.setMaxAllowed(2,"You may only select two colors!");
colorGroup.setMasterBehavior("some");
</script>

Example 2

This example shows a checkbox group with a master checkbox which selects all other boxes in the group.
In this example, all the checkboxes have the same name, but different values.

I would like to offer my services on the following days:
      All
      Monday
      Tuesday
      Wednesday
      Thursday
      Friday
      Saturday
      Sunday
<view/hide code> 
<script type="text/javascript">
var dayGroup = new CheckBoxGroup();
dayGroup.addToGroup("day");
dayGroup.setControlBox("alldays");
dayGroup.setMasterBehavior("all");
</script>

Example 3

This example shows a simple set of checkboxes with no control box, but you are limited to picking 2 choices.

Select your two favorite colors:
Red
Green
Blue
Black
White
<view/hide code> 
<script type="text/javascript">
var limitGroup = new CheckBoxGroup();
limitGroup.addToGroup("limit*");
limitGroup.setMaxAllowed(2,"Only pick 2!");
</script>

Example 4

Example with 1 control box and 1 child box, for testing purposes.

Control
   Child
<view/hide code> 
<script type="text/javascript">
var testGroup = new CheckBoxGroup();
testGroup.addToGroup("test1");
testGroup.setControlBox("testAll");
</script>

Example 5

Example with some boxes checked, for further testing...

Control
   Child 1
   Child 2
   Child 3
   Child 4
<view/hide code> 
<script type="text/javascript">
var testGroup2 = new CheckBoxGroup();
testGroup2.addToGroup("test2_1");
testGroup2.addToGroup("test2_2");
testGroup2.addToGroup("test2_3");
testGroup2.addToGroup("test2_4");
testGroup2.setControlBox("test2_All");
</script>
Logo All Contents Copyright © Matt Kruse