...use these to jump around or read it all
[The Form Elements]
[The Script]
Here's a fantastic effect. As you know, multiple checkboxes are often avoided in forms because users have a tendency to simply check all the boxes no matter what. Radio buttons have become the preferred element when a choice must be made. You mostly see checkboxes used as single items. I see them mostly at the end of larger forms asking if I want to receive a newsletter or email updates about a product I'm downloading.
But what if you want a user to choose two from say, five elements?
Well, here's a script that you can attach to your forms that will allow you to limit the number of checks your users can make. You'll fall in love with checkboxes all over again. I got the original idea for this script from The Codeman. He has a similar script that only worked in Internet Explorer. I took the concept and rewrote it so that the script would work across browsers.
Here's the effect. Give it a try. I know it says to choose only two, but in order to see the effect, you'll need to pick a third. Go ahead! Break the rules! Try to pick three!
You can even make different choices, un-click choices and change things around. As long as you only have two, you're good to go. Choose three, and you get the alert.
Did you see it? Not only did you get that nasty alert window but you also had your third choice unclicked. Take that!
Of course you can set the script to allow as many or as few clicks as you'd like, but in order to do that you need to understand how this puppy works. So let's get into it.
The Form Elements
I only have checkboxes in the example, but you can surround them with any number of extra form elements. I just singled out the form checkboxes for demonstration purposes. The code looks like this:
<FORM NAME="joe">
<b>Pick Only Two Please!</b>
<INPUT TYPE="checkbox" NAME="dog"
onClick="return KeepCount()"> Dog
<INPUT TYPE="checkbox" NAME="cat"
onClick="return KeepCount()"> Cat
<INPUT TYPE="checkbox" NAME="pig"
onClick="return KeepCount()"> Pig
<INPUT TYPE="checkbox" NAME="ferret"
onClick="return KeepCount()"> Ferret
<INPUT TYPE="checkbox" NAME="hampster"
onClick="return KeepCount()"> Hampster
</FORM>
These are basic checkboxes. The form is named "joe". Each checkbox is then given a NAME. The NAME is equal to what the checkbox represents That's pretty basic form stuff.
The trick is the onClick() inside of each of the checkboxes. Notice the onClick() asks for a return from a fuction named "KeepCount()". That return function will allow us to disallow the third box (or which ever you choose) to be checked.
Make a point of following that format or this JavaScript won't give you the desired effect.
Got it? Super. Moving along...
The Script
It's a fairly simple little script. It looks like this:
<SCRIPT LANGUAGE="javascript">
function KeepCount() {
var NewCount = 0
if (document.joe.dog.checked)
{NewCount = NewCount + 1}
if (document.joe.cat.checked)
{NewCount = NewCount + 1}
if (document.joe.pig.checked)
{NewCount = NewCount + 1}
if (document.joe.ferret.checked)
{NewCount = NewCount + 1}
if (document.joe.hampster.checked)
{NewCount = NewCount + 1}
if (NewCount == 3)
{
alert('Pick Just Two Please')
document.joe; return false;
}
}
</SCRIPT>
The script works because it's set up to inspect every checkbox every time. That's how you're able to check, uncheck, and check again as long as only two are checked. The script counts the number of checkmarks every time you click.
We start with the function. I called it "KeepCount()" for fairly obvious reasons. You'll remember that this function will trigger every time your user chooses a checkbox.
We need to give the JavaScript somewhere to keep a count so I set it up as a variable named NewCount.
Now the magic. Notice the script checks each checkbox right in a row, every time. Here's just the first blip of code:
if (document.joe.dog.checked)
{NewCount = NewCount + 1}
If the first checkbox (dog) is checked, then NewCount gets one added to it. If not, we move along to the next checkbox. Following the script down, if cat is checked, one is added. If not, we go to the next blip.
Each checkbox is tested in order. The script keeps count again and again each time the user clicks. But what if there are three checked?
if (NewCount == 3)
{
alert('Pick Just Two Please')
document.joe; return false;
}
If NewCount is equal (==) to three, then up pops the alert box and the return to the form, thus the third checkbox, is false. It unclicks.
Cool, huh?
The function bracket and the end-script tag round out the script.
The reason the script is able to count the boxes again and again is way at the top of the function. Note that every time the function triggers, the NewCount value is set back to zero.
That's That
You can set this to as many checkboxes as you'd like and as many choices from those boxes as you'd like. If you use the effect more than once on a page, please remember that you must change out the NAME of the checkboxes, so you must also change out the names in the script too.
You'll need a blip of code for every checkbox you have in order for the checkboxes to count each time. Just make sure that your script equals your checkboxes both in number and in NAMEs.
My suggestion is, if you're going to use this more than one time on the page, paste an entirely new script with a new function name and new count name other than "NewCount".
Just make sure to keep the return command in the checkboxes themselves. That's what makes the magic in this little script.
Enjoy!
[The Form Elements]
[The Script]
IE 7
Firefox 2.0
