Logo
doctype [?]
[strict] [loose] [none]

Check Box Groups


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>