WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (3/8)

[previous] [next]

Beyond HTML Goodies, chapter 6

Limiting Check Box Choices

Here's a fantastic effect. As you know, multiple check boxes 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 check boxes 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 out of, say, five elements?

You can find this tutorial, and all of its examples, online at https://www.htmlgoodies.com/tutors/onlytwo.html.

You can download just the examples at https://www.htmlgoodies.com/wpg/.

Well, here's a script 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 check boxes 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 shown in Figure 6.4. I know that it says to choose only two, but in order to see the effect, I picked a third. I say go ahead! Break the rules! Try to pick three!

Figure 6.4
But I want three . . . I'm a rebel!

You can even make different choices, unclick 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 check boxes in the example, but you can surround them with any number of extra form elements. I just singled out the form check boxes 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="hamster" 
onClick="return KeepCount()"> Hamster
</FORM>

These are basic check boxes. The form is named "joe". Each check box is then given a NAME. The NAME is equal to what the check box represents. That's pretty basic form stuff.

The trick is the onClick() inside each of the check boxes. Notice the onClick() asks for a return from a function named KeepCount(). That return function will allow us to disallow the third box (or whichever 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! Let's move 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.hamster.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 check box 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 check marks 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 check box.

We need to give the JavaScript somewhere to keep a count, so I set it up as a variable named NewCount.

Now comes the magic. Notice that the script checks each check box 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 check box (dog) is checked, NewCount gets one added to it. If not, we move along to the next check box. Following the script down, if cat is checked, one is added. If not, we go to the next blip.

Each check box is tested in order. The script keeps count again and again each time the user clicks. But what happens if three are checked:

if (NewCount == 3)
{
alert('Pick Just Two Please')
document.joe; return false;
}

If NewCount is equal (==) to 3, up pops the alert box and then returns to the form; thus the third check box, is false. It unclicks.

Cool, huh? The function bracket and the end-script flag round out the script.

The reason that 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 0.

You can set this to as many check boxes 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 check boxes, so you must also change out the names in the script.

You'll need a blip of code for every check box you have in order for the check boxes to count each time. Just make sure that your script equals your check boxes 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 check boxes themselves. That's what makes the magic in this little script.

[previous] [next]

Created: August 9, 2002
Revised: August 9, 2002

URL: https://webreference.com/programming/javascript/goodies/chap6/3.html