unchecking / checking a checkbox if another box checked

I have a series of checkboxes for a list of car rental companies. Users are offered to select a company or choose "No Preference" The "No Preferrence" box is checked.

I would like the no preferrence box to uncheck, if any other box is checked. Conversely, if after checking some boxes, they then check the "No Preferrence" box, I'd like the other boxes to uncheck.

I have found a few solutions for this on this site, but I am using an array as the variable, and none of them seem to work if the variable name is an array. ( carBrand[ALL] is the "No Preffernece" variable name. The other variables are carBrand[AVIS} etc. )

The code is below.

I'd appreciate any help or advice.



<fieldset><legend ><span class='brandName'>Choose Your Preferred Companies</span></legend><br>
<input type='checkbox' name='carBrand[ALL]' value='all' checked class='brandlist' style="margin-left: 8px; margin-top: 5px;  "><span class='brandName'>No Preferrence</span><table width='320' cellspacing='0' cellpadding='0' style="margin-left: 8px; margin-top: 5px;  "><tr><td align="left" ><input type='checkbox' name='carBrand[Alamo]' value='Alamo' class='brandlist' >
<img src='images/Alamo_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Alamo</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Avis]' value='Avis' class='brandlist' >
<img src='images/Avis_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Avis</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Budget]' value='Budget' class='brandlist' >
<img src='images/Budget_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Budget</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Dollar]' value='Dollar' class='brandlist' >
<img src='images/Dollar_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Dollar</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Thrifty]' value='Thrifty' class='brandlist' >
<img src='images/Thrifty_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Thrifty</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Enterprise]' value='Enterprise' class='brandlist' >
<img src='images/Enterprise_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Enterprise</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Hertz]' value='Hertz' class='brandlist' >
<img src='images/Hertz_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Hertz</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[National]' value='National' class='brandlist' >
<img src='images/National_logo.gif' alt='' border='0' ></td><td><span class='brandName'>National</span></td></tr><tr></td></tr></table><br><br></fieldset>

Open in new window

LVL 6
birwinAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:

<script type="text/javascript">
function uncheck(id){
	document.getElementById(id).checked=false;
}
function uncheckall(obj)
{
	if(false===obj.checked)return false;
	var chk = document.getElementsByTagName('input');
	var i =-1,limit=chk.length;
	while(++i<limit)
	{
		if( String(chk[i].type).toLowerCase()=='checkbox' && chk[i].name!='carBrand[ALL]'){
			chk[i].checked=false;
		}
	}
}
</script>

<fieldset>
<legend ><span class='brandName'>Choose Your Preferred Companies</span></legend><br>
<input type='checkbox' onclick='uncheckall(this)' name='carBrand[ALL]' id='carBrand_all' value='all' checked='checked' class='brandlist' style="margin-left: 8px; margin-top: 5px;  "><span class='brandName'>No Preferrence</span><table width='320' cellspacing='0' cellpadding='0' style="margin-left: 8px; margin-top: 5px;  "><tr><td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Alamo]' value='Alamo' class='brandlist' >
<img src='images/Alamo_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Alamo</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Avis]' value='Avis' class='brandlist' >
<img src='images/Avis_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Avis</span></td></tr><tr><td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Budget]' value='Budget' class='brandlist' >
<img src='images/Budget_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Budget</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Dollar]' value='Dollar' class='brandlist' >
<img src='images/Dollar_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Dollar</span></td></tr><tr><td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Thrifty]' value='Thrifty' class='brandlist' >
<img src='images/Thrifty_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Thrifty</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Enterprise]' value='Enterprise' class='brandlist' >
<img src='images/Enterprise_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Enterprise</span></td></tr><tr><td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[Hertz]' value='Hertz' class='brandlist' >
<img src='images/Hertz_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Hertz</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' onclick='uncheck("carBrand_all")' name='carBrand[National]' value='National' class='brandlist' >
<img src='images/National_logo.gif' alt='' border='0' ></td><td><span class='brandName'>National</span></td></tr><tr></td></tr></table><br><br></fieldset>

Open in new window

0
leakim971PluritechnicianCommented:
Try this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function carBrandAll(o) {
		var inputs = document.getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			if( inputs[i].className == "brandlist" && inputs[i].name != "carBrand[ALL]" && o.checked ) inputs[i].checked = false;
		}
	}
	function car() {
		var inputs = document.getElementsByTagName("input");
		var _checked = false;
		for(var i=0;i<inputs.length;i++) {
			if( inputs[i].className == "brandlist" ) {
				if( inputs[i].name == "carBrand[ALL]" ) {
					forall = inputs[i];
				}
				else {
					_checked = _checked || inputs[i].checked;
				}
			}
		}
		forall.checked = !_checked;
	}
</script>
</head>
<body>
<fieldset><legend ><span class='brandName'>Choose Your Preferred Companies</span></legend><br>
<input type='checkbox' name='carBrand[ALL]' value='all' checked class='brandlist' style="margin-left: 8px; margin-top: 5px; " onchange="carBrandAll(this);"><span class='brandName'>No Preferrence</span><table width='320' cellspacing='0' cellpadding='0' style="margin-left: 8px; margin-top: 5px;  "><tr><td align="left" ><input type='checkbox' name='carBrand[Alamo]' value='Alamo' class='brandlist' onchange="car(this);" >
<img src='images/Alamo_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Alamo</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Avis]' value='Avis' class='brandlist' onchange="car(this);" >
<img src='images/Avis_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Avis</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Budget]' value='Budget' class='brandlist' onchange="car(this);" >
<img src='images/Budget_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Budget</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Dollar]' value='Dollar' class='brandlist' onchange="car(this);" >
<img src='images/Dollar_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Dollar</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Thrifty]' value='Thrifty' class='brandlist' onchange="car(this);" >
<img src='images/Thrifty_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Thrifty</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Enterprise]' value='Enterprise' class='brandlist' onchange="car(this);" >
<img src='images/Enterprise_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Enterprise</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Hertz]' value='Hertz' class='brandlist' onchange="car(this);" >
<img src='images/Hertz_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Hertz</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[National]' value='National' class='brandlist' onchange="car(this);" >
<img src='images/National_logo.gif' alt='' border='0' ></td><td><span class='brandName'>National</span></td></tr><tr></td></tr></table><br><br></fieldset>
</body>
</html>

Open in new window

0
birwinAuthor Commented:
Hi hielo:
Your code works perfectly when used alone, but when I use it on my page, it reacts strangely. When another box is checked, the "No Preferences" remains checked, but, if after checking a few other brands, I uncheck the "No Preferences" button, it clears the other checkboxes when I check it again.
The page has several other select statements and some radio buttons. Could they be conflicting?
There is only one other JavaScript on the page, a calendar program that I use frequently that has never conflicted with anything in the past.
Any ideas on how to make it work on a busy page?
leakim971: Your code did not work when tested alone. The "No Preferences" checkbox didn't clear until at least two other checkboxes were checked.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

phpsalesCommented:
This is possible with the help of JQuery. Please see code below.
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
//on page ready
google.setOnLoadCallback(function() {
	$("input[name^=carBrand][name!=carBrand[ALL]]").each(function(){
		$(this).change(function(){
			if(this.checked) $("input[name=carBrand[ALL]]").attr("checked",false);
		});
	});
	$("input[name=carBrand[ALL]]").change(function(){
		$("input[name^=carBrand][name!=carBrand[ALL]]").each(function(){
			this.checked=false;
		});
	});	
});
</script>
<!-- HTML below has not been modified -->
<fieldset><legend ><span class='brandName'>Choose Your Preferred Companies</span></legend><br>
<input type='checkbox' name='carBrand[ALL]' value='all' checked class='brandlist' style="margin-left: 8px; margin-top: 5px;  "><span class='brandName'>No Preferrence</span><table width='320' cellspacing='0' cellpadding='0' style="margin-left: 8px; margin-top: 5px;  "><tr><td align="left" ><input type='checkbox' name='carBrand[Alamo]' value='Alamo' class='brandlist' >
<img src='images/Alamo_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Alamo</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Avis]' value='Avis' class='brandlist' >
<img src='images/Avis_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Avis</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Budget]' value='Budget' class='brandlist' >
<img src='images/Budget_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Budget</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Dollar]' value='Dollar' class='brandlist' >
<img src='images/Dollar_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Dollar</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Thrifty]' value='Thrifty' class='brandlist' >
<img src='images/Thrifty_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Thrifty</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Enterprise]' value='Enterprise' class='brandlist' >
<img src='images/Enterprise_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Enterprise</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Hertz]' value='Hertz' class='brandlist' >
<img src='images/Hertz_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Hertz</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[National]' value='National' class='brandlist' >
<img src='images/National_logo.gif' alt='' border='0' ></td><td><span class='brandName'>National</span></td></tr><tr></td></tr></table><br><br></fieldset>

Open in new window

0
phpsalesCommented:
Sorry for the double post. Noticed that the code could be simplified.


<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
//on page ready
google.setOnLoadCallback(function() {
	$("input[name^=carBrand][name!=carBrand[ALL]]").change(function(){
			if(this.checked) $("input[name=carBrand[ALL]]").attr("checked",false);
	});
	$("input[name=carBrand[ALL]]").change(function(){
		$("input[name^=carBrand][name!=carBrand[ALL]]").each(function(){
			this.checked=false;
		});
	});	
});
</script>
<!-- HTML below has not been modified -->
<fieldset><legend ><span class='brandName'>Choose Your Preferred Companies</span></legend><br>
<input type='checkbox' name='carBrand[ALL]' value='all' checked class='brandlist' style="margin-left: 8px; margin-top: 5px;  "><span class='brandName'>No Preferrence</span><table width='320' cellspacing='0' cellpadding='0' style="margin-left: 8px; margin-top: 5px;  "><tr><td align="left" ><input type='checkbox' name='carBrand[Alamo]' value='Alamo' class='brandlist' >
<img src='images/Alamo_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Alamo</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Avis]' value='Avis' class='brandlist' >
<img src='images/Avis_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Avis</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Budget]' value='Budget' class='brandlist' >
<img src='images/Budget_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Budget</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Dollar]' value='Dollar' class='brandlist' >
<img src='images/Dollar_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Dollar</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Thrifty]' value='Thrifty' class='brandlist' >
<img src='images/Thrifty_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Thrifty</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[Enterprise]' value='Enterprise' class='brandlist' >
<img src='images/Enterprise_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Enterprise</span></td></tr><tr><td align="left" ><input type='checkbox' name='carBrand[Hertz]' value='Hertz' class='brandlist' >
<img src='images/Hertz_logo.gif' alt='' border='0' ></td><td><span class='brandName'>Hertz</span></td><td  align="left">&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" ><input type='checkbox' name='carBrand[National]' value='National' class='brandlist' >
<img src='images/National_logo.gif' alt='' border='0' ></td><td><span class='brandName'>National</span></td></tr><tr></td></tr></table><br><br></fieldset>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
birwinAuthor Commented:
Brilliant. Worked perfectly with not modification to my code.
0
birwinAuthor Commented:
phpsales:
Just a couple of questions. What happens if I have more than one group of checkboxes. Do I just change the variable names in the jquery code?
Also, what is the advantage of using Google load over a regular link to either google or my own server?
Thanks.
Brian
0
phpsalesCommented:
Correct, you would just clone and modify the code (variable names). You wouldn't need to clone the Google onload call just the onchange event calls inside.

RE: "Also, what is the advantage of using Google load over a regular link to either google or my own server?"

Google updates the JS API with new versions as needed. The main advantage would be you wouldn't have to host a specific version and you can change versions by editing the Google JS load call. For more information please see the link below:

http://code.google.com/apis/ajaxlibs/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.