Limit Number of Checkbox Checks

When a site visitor is invited to make a maximum number of choices with checkboxes, there needs to be a way to limit the number of checks.

This article provides the means. With JavaScript.

The id value of each checkbox to monitor is listed. When a checkbox is clicked on, the checked are counted. If more than the maximum, the latest check is unchecked and a message is presented.

JavaScript breaks when asked to handle special characters in form field names, such as the square brackets when PHP form fields are handled as arrays (like name="color[]"). The JavaScript in this article bypasses that limitation by using id values instead of field name values to determine how many checkboxes are checked.

The example in this article shows how to limit the number of checks in more than one set of checkboxes. The id values of each set is listed in the JavaScript function CountChecks().

Demonstration Example

There is a set of 6 checkboxes listing sizes. The maximum number that may be checked in that set is 3.

There is also a set of 5 checkboxes listing colors. The maximum for that set is 2.

Here is the working example:

Implementing Maximum Number Of Checkbox Checks For Your Forms

Here is the code of the above example. Implementation notes follow.

<script type="text/javascript">
/* 
   Checkbox Check Limiting
   Version 1.0
   September 6, 2010

   Will Bontrager
   https://www.willmaster.com/
   Copyright 2010 Bontrager Connection, LLC

   Bontrager Connection, LLC grants you 
   a royalty free license to use or modify 
   this software provided this notice appears 
   on all copies. This software is provided 
   "AS IS," without a warranty of any kind.
*/

function CountChecks(whichlist,maxchecked,latestcheck) {
// An array containing the id of each checkbox to monitor. 
//   List the id of each checkbox in the set. If more than 
//   one set, list other sets in their own arrays. The
//   array name to use is passed to this function.

var listone = new Array("size1", "size2", "size3", "size4", "size5", "size6");
var listtwo = new Array("color1", "color2", "color3", "color4", "color5");

// End of customization.
var iterationlist;
eval("iterationlist="+whichlist);
var count = 0;
for( var i=0; i<iterationlist.length; i++ ) {
   if( document.getElementById(iterationlist[i]).checked == true) { count++; }
   if( count > maxchecked ) { latestcheck.checked = false; }
   }
if( count > maxchecked ) {
   alert('Sorry, only ' + maxchecked + ' may be checked.');
   }
}
</script>


<p>
Check up to 3 sizes:<br>
<input id='size1' type="checkbox" name="boxsize[]" onclick="CountChecks('listone',3,this)" value="2x2">2x2 
<input id='size2' type="checkbox" name="boxsize[]" onclick="CountChecks('listone',3,this)" value="2x2.5">2x2.5 
<input id='size3' type="checkbox" name="boxsize[]" onclick="CountChecks('listone',3,this)" value="2x3">2x3 
<input id='size4' type="checkbox" name="boxsize[]" onclick="CountChecks('listone',3,this)" value="2.5x2.5">2.5x2.5 
<input id='size5' type="checkbox" name="boxsize[]" onclick="CountChecks('listone',3,this)" value="2.5x3">2.5x3 
<input id='size6' type="checkbox" name="boxsize[]" onclick="CountChecks('listone',3,this)" value="3x3">3x3
</p>

<p>
Check up to 2 colors:<br>
<input id='color1' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo',2,this)" value="red">Red 
<input id='color2' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo',2,this)" value="gold">Gold 
<input id='color3' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo',2,this)" value="green">Green 
<input id='color4' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo',2,this)" value="silver">Silver 
<input id='color5' type="checkbox" name="favoritecolor[]" onclick="CountChecks('listtwo',2,this)" value="blue">Blue 
</p>

The above code includes both the JavaScript and the example checkboxes. In practice, the JavaScript may be in a different location of the web page than the form with the checkboxes.

The above example code can be run as is on your test page. To implement the system for your own forms:

Step 1 —

Each checkbox field to be included in the monitoring needs an id value. An id value is a series of alpha-numeric characters. Example: id="whatever"

Each id value in the source code of the entire web page must be unique.

Step 2 —

In the JavaScript, list the id values of the checkboxes to be monitored. The variable name that holds the list of id values is called an "array."

If more than one set of checkboxes need to be monitored, list the id values of each set in its own array.

The variable name for an array can be composed of any sequence of letters so long as it is not a duplicate of other names used in the JavaScript.

The example has two sets of checkboxes to monitor. Thus, there are two arrays with lists of id values. The array names in the example are "listone" and "listwo".

After the JavaScript has been edited to contain the list of id values for the monitored checkboxes, put the JavaScript into your web page.

The JavaScript may be anywhere in the web page source code that JavaScript can run, above or below the form, in the HEAD or BODY area.

Step 3 —

Put this attribute with the JavaScript function CountChecks() into the field of each checkbox to be monitored, edited according to the notes below.

onclick="CountChecks('varname',max,this)"

Notes:

1. varname
   Replace varname with the variable name of the array in the JavaScript that holds the list of id values. The variable name is between single quote marks.

2. max
   Replace max with the maximum number of checkboxes that may be checked in that set. This number is not in quotes.

3. this
   Leave this as is. The word this (unquoted) tells the JavaScript which checkbox was clicked on. If the maximum has been exceeded, the JavaScript knows which checkbox to uncheck.

If the system doesn't work for some reason, open the Firefox browser and load the page. Use its "Tools | Error Console" menu item to see what the issue is. (Firefox is the best free and instantly available JavaScript debugging tool that I've found.)

A Limitation

Because it is JavaScript, limiting the number of checkbox checks can happen right on the web page only when JavaScript is available in the browser. Therefore, the software the form is submitted to should also check if a maximum is exceeded and provide an appropriate error message when such is the case.

Master Form V4 has the feature built in. It can enforce a maximum and a minimum number of checkbox and selection menu selections.

When a site visitor is invited to make a maximum number of choices with checkboxes, there is a way to limit the number of checks.

Will Bontrager