[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

unchecking / checking a checkbox if another box checked

Posted on 2010-04-10
8
Medium Priority
?
413 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:birwin
8 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 30351847

<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
 
LVL 83

Expert Comment

by:leakim971
ID: 30352180
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
 
LVL 6

Author Comment

by:birwin
ID: 30363504
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 2

Expert Comment

by:phpsales
ID: 30367015
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
 
LVL 2

Accepted Solution

by:
phpsales earned 2000 total points
ID: 30367195
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
 
LVL 6

Author Closing Comment

by:birwin
ID: 31761133
Brilliant. Worked perfectly with not modification to my code.
0
 
LVL 6

Author Comment

by:birwin
ID: 30368725
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
 
LVL 2

Expert Comment

by:phpsales
ID: 30418183
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

590 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question