Limiting Selections

3. Add to Your Page

The next step in implementing limited selection checkbox groups to your page is to add the script code to your page by placing the following into the head section:

With this done all that remains is to define the groups of checkboxes in our form. Since checkboxes are not grouped normally we need a way to define that particular checkboxes all belong to the same group. The easiest way to do this (and the way that the script expects) is to give all of the checkboxes in one group the same name followed by an underscore and then a number within the group. For example to define the first checkbox in a group called "box" we would use:

The checkboxes within the group need to be sequentially numbered for the script to work so the name of the subsequent entries would be "box_2", "box_3"and so on for as many entries as belong to that group.

To define a second group of checkboxes in the same form we simply give them a different group name so our second group might contain "hat_1", "hat_2" and so on. The group name can be as long as you want (within reason) as long as the names end with an underscore followed by the number of the entry within the group that it belongs to.

That takes care of the naming of our group entries. The final step is to link the checkboxes to the script so that the script can check if the maximum allowable number of entries in the group has been exceeded and disallow the selection of the extra checkbox if it has.

For the function to work it needs to know two things: which checkbox is being selected and how many checkboxes are allowed to be selected in the group that the checkbox belongs to. We can pass that information through when the checked status fo the checkbox changes by adding an "onclick" event handfler to each of the checkboxes in each group like this:

The same code is added to each checkbox within the same group and the only difference between the code added to different groups is the second parameter which is the number of entries in the group that are allowed to be selected (in this example code the box group is allowed to have 2 entries selected).