Limit Number of Checked Checkboxes

Select your favorite two countries below:

This short but practical script lets you limit the number of checkboxes within a group that can be checked. For example, you may have a list of 5 checkboxes, but wish to allow the user only the ability to check a maximum of 2 at any time. Use this script to accomplish that.

We have tested the code in IE 7.0, Firefox 2.0.0.7, Opera 9.23, Netscape 9.0b3, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is a two (2) part copy and paste code that goes in both the <HEAD> (No reconfigurations other than possibly the alert message) section and <BODY> section (incorporated into a working form with minimal reconfigurations) of your document. See below where and howto make the reconfigurations.

if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" checkboxes")
this.checked=false
}
}
}
}>br>
</script>

Here is where you would change the alert message that will appear if you select more than the defined number of check boxes.

Alert Message

Here is where you would change the number of checkboxes allowed.

<form id="world" name="world">
<input type="checkbox" name="countries" /> USA<br />
<input type="checkbox" name="countries" /> Canada<br />
<input type="checkbox" name="countries" /> Japan<br />
<input type="checkbox" name="countries" /> China<br />
<input type="checkbox" name="countries" /> France<br />
<input type="reset" value="Reset">
</form>

<script type="text/javascript">

//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.world.countries, 2)

</script>

As you can notice in these two sections the color coded areas. These has to be in sync with each other or the effect will not work correctly. You can change the names to anything you want for your form but they have to match.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]