JavaScript Forum

**Classna** · 09-25-2006, 04:56 PM

I would like to unhide a layer <div> on my page when a radio button is selected. When the radio button is not selected, the layer should not be visible. Any ideas how will I be able to achieve that?

**LadynRed** · 09-25-2006, 05:17 PM

Javascript and CSS is going to be necessary.

**vangogh** · 09-25-2006, 05:23 PM

I moved this thread to the JavaScript forum since it's probably the best place to get answers.

The basic procudure would be to have something like an onchange event on the radio buttons that calls a JavaScript function. The function would then show and hide various divs on the page depending on your needs.

Here's an article I found at A List Apart that I think covers the basics of the show/hide functions. The only part that is missing I think is the onchange even handler on the radio buttons. You should be able to find that with a little bit of searching or chances are someone will jump in here with more details on how to make it work.

**mastercomputers** · 03:58 AM

Are you sure you want radio button or checkbox?

I use radio buttons for making a selection between a few choices, e.g. gender Male/Female, If you want it to act like an On, Off switch, then I'll show you that, but a checkbox serves this purpose better I think.

So here's a full working example:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Unhide on checkboxes/radio buttons</title>
		<script type="text/javascript">
		function toggleLayer(val)
		{
			if(val == 'on' || val === true)
			{
				document.getElementById('b1').checked = true;
				document.getElementById('a1').checked = true;
				document.getElementById('layer1').style.display = 'block';
			}
			else if(val == 'off' || val === false)
			{
				document.getElementById('b1').checked = false;
				document.getElementById('a2').checked = true;
				document.getElementById('layer1').style.display = 'none';
			}
		}
		</script>
	</head>
	<body onload="document.getElementById('layer1').style.display = 'none'; document.getElementById('a2').checked = true; document.getElementById('b1').checked = false;">
		<form action="" method="post">
			<fieldset>
				<legend>Unhide Layer Form</legend>
				<ul>
					<li><label for="a1">On</label> <input id="a1" name="switcher" type="radio" value="on" checked="checked" onclick="toggleLayer(this.checked);" /> <label for="a2">Off</label> <input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /></li>
					<li><label for="b1">Check Me:</label> <input id="b1" name="b1" type="checkbox" value="on" checked="checked" onclick="toggleLayer(this.checked);" /></li>
				</ul>
			</fieldset>
		</form>
		<div id="layer1">You can now see this.</div>
	</body>
</html>

Now I use Javascript to hide the layer and set the checkboxes etc, because if javascript is not enabled, then everything should default to being on and displaying and these checkboxes/radio have no effect whatsoever.

If you need more explanation with the code, then I'll be more than happy to explain it.

P.S. I've updated the script to work in IE as noted by Kirtan, I also removed questionable names because it may conflict with reserved keywords IE could have used.

Cheers,

MC

**Kirtan** · 09-27-2006, 08:24 AM

Above script works fine with Firefox. but not with IE.
Here is another with radio button which works in both browsers.
I am new user. Don't forget to give talk reputation if you find this code useful.

Code:

<html>
<head><title>hi</title>
<script language=javascript>
function formshowhide(id)
{
if(id == "quote")
{
document.getElementById('quotef').style.display = "block";
document.getElementById('otherf').style.display = "none";
}
else
{
document.getElementById('quotef').style.display = "none";
document.getElementById('otherf').style.display = "block";
}
}
</script>
</head>
<body>
<form>
<span style="color: #1F85E7;">Name:</span> <input type="text"><p>
<span style="color: #1F85E7;">Email:</span> <input type="text"><p>
<span style="color: #1F85E7;">Subject:</span>
<label>
<input type="radio" name="ShowHide" value="quote" onClick="formshowhide('quote')">
Quote</label>
<br>
<label>
<input type="radio" name="ShowHide" value="other" onClick="formshowhide('other')">
Other</label>
<br>
<div id="quotef">
<span style="color: #1F85E7;">Description:</span><br><textarea></textarea>
</div>
<div id="otherf" style="display:none;">
<span style="color: #1F85E7;">Additional Comments:</span><br><textarea></textarea>
</div>
</form>
</body>
</html>