Checkboxes / how to limit

blackte · Apr 7, 2004

I have checkboxes on a form, and would like to limit how many can be checked at once. example Yes, No question, if they check Yes, I don't want them to be able to check No also? Can this be done? I know this works using radio buttons, but need to use checkboxes.

Thanks in advance for the help with this.

Thanks TBlack.

MichiganRon · Apr 7, 2004

blackte,

This can be done with JavaScript. There are probably a hundred ways to do it. Here's my solution:

Code:

<html>
<head>
<title>Untitled</title>

[COLOR=blue]<script language=[COLOR=green]"JavaScript"[/color] type=[COLOR=green]"text/javascript"[/color]>
<!--
function VerifyCheckboxes(chkArr, chkValue){
	[COLOR=green]//For ease of use, a variable will substitute for the checkbox array[/color]
	var CheckArray = eval("document.CheckForm."+chkArr);
	
	for (x=0; x<CheckArray.length; x++){ [COLOR=green]//For each checkbox[/color]
		if (CheckArray[x].value!=chkValue){ [COLOR=green]//If this is not the checkbox which was just checked[/color]
			CheckArray[x].checked = false;
		} 
	}
}
//-->
</script>[/color]

</head>
<body>
<form name="CheckForm">
	First set of Checkboxes:<br />
	<input type="checkbox" name="Check1" value="yes" onclick="[COLOR=blue]VerifyCheckboxes('Check1', this.value);[/color]">Yes<br />
	<input type="checkbox" name="Check1" value="no" onclick="[COLOR=blue]VerifyCheckboxes('Check1', this.value);[/color]">No<br />
	<input type="checkbox" name="Check1" value="maybe" onclick="[COLOR=blue]VerifyCheckboxes('Check1', this.value);[/color]">Maybe<br />
	<br />
	Second set of Checkboxes:<br />
	<input type="checkbox" name="Check2" value="yes" onclick="[COLOR=blue]VerifyCheckboxes('Check2', this.value);[/color]">Yes<br />
	<input type="checkbox" name="Check2" value="no" onclick="[COLOR=blue]VerifyCheckboxes('Check2', this.value);[/color]">No<br />
	<input type="checkbox" name="Check2" value="maybe" onclick="[COLOR=blue]VerifyCheckboxes('Check2', this.value);[/color]">Maybe<br />
</form>
</body>
</html>

Hope this is what you were looking for. A word of caution, this will not work if users are using a non-javascript enabled browser (like lynx or a web-phone) or if they have javascript turned off. I wrote it to work in IE 6.0. You may need to tweak it to work in other browsers.

Copy and paste it and play around with it a little.

-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH

wolf8769 · Apr 7, 2004

I would like to point out that it is somewhat illogical to use checkboxes in that fashion. The purpose of a checkbox is to function like an On/Off switch. So instead of:

Code:

Have you ever visited [URL unfurl="true"]www.homestarrunner.com?<br>[/URL]
<input type=checkbox name="cb1" value="Yes"> Yes<br>
<input type=checkbox name="cb1" value="No"> No<br>

Do this:

Code:

<input type=checkbox name="cb1" value=1> I have visited [URL unfurl="true"]www.homestarrunner.com.[/URL]

They either check it or they don't. I'm only suggesting that this is a more standard use of checkboxes. (And therefore perhaps more what a user would expect) But of course you are welcome to code any way you want! <g>

blackte · Apr 7, 2004

Darkshadeau & wolf8769, I would like to use radio buttons, for the Yes, No answers to my questions, but the users want to be able to tab through the answers with the tab key instead of just using a mouse. I have read in places that if your radio buttons are name the same i.e. both the same name for Yes and No, that it can only tab to one in the group and not all of them. If you know of a way around this, I would like to see some code. And this would solve my problem.

Thanks again for the help with this problem.

Thanks TBlack.

MichiganRon · Apr 7, 2004

blackte,

This is the way that the controls were designed. However, there is no need for visitors to move to their mouse when they want to change the value of the control. When a user tabs to an option button (radio button), the focus will be on the currently selected choice. To change the selection without using the mouse, visitors can use the arrow buttons on their keyboard.

As I mentioned, this is the way that the form "controls" work and there is no way to change it. Most users know how to navigate form controls, give them a little credit. You may confuse some visitors by using a checkbox when an option control should be used.

When you weigh all the good and bad between the two choices, IMHO, the "option" button will win as the best choice. But I digress, code your webpage however you like. After all, it is your webpage.

Good luck,
-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH

blackte · Apr 7, 2004

Darkshadeau, thanks for the info, I will be using the radio buttons instead of the checkboxes. This is more approperiate to the specific questions that I'm asking. Thanks again for all of your help.

Thanks TBlack.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Checkboxes / how to limit

blackte

Programmer

MichiganRon

MIS

wolf8769

Programmer

blackte

Programmer

MichiganRon

MIS

blackte

Programmer

Similar threads

Part and Inventory Search

Sponsor