I know from scouring the Web that this is a very common Javascript question, but I have a twist on the question which is giving me headaches, and I hope some of the brilliant minds here at DaniWeb can help show me the error of my ways.

Say a user has checked a checkbox when submitting a form. I have a PHP script that records that check in a MySQL record. Later when they visit the page, the PHP script shows the checkbox as being checked. That's all working fine.

Now here's what I'm TRYING to do: Since the checkbox is checked when the page loads, I want a certain div to show up. And when the user UNchecks the checkbox, I want the div to go away. Simple, right?

Here's the Javascript I've placed in the header:

function Toggle(id) {
			if (document.getElementById(id).style.display == "none" || document.getElementById(id).style.display == "") {
				document.getElementById(id).style.display = "block";
			} else if (document.getElementById(id).style.display == "block") {
				document.getElementById(id).style.display = "none";
			} else {
				document.getElementById(id).style.display = "none";
			}
		}

In the CSS, I've styled a div thusly:

#test01 { width:200px; padding:15px; background-color:#ffc; display:block; }

And here's what I'm doing in the <body>:

<input type="checkbox" name="" onclick="Toggle('test01')" checked="checked" /> Yellow Box<br />

	<div id="test01">
		This should show up when you click Yellow Box. And it should go away when you click it again.
	</div>

When I uncheck the checkbox (first click), nothing happens: the div still shows up.

Then when I re-check the checkbox (second click), the div goes away.

And then when I un-check the checkbox again (third click), the div comes back.

In other words, it's doing the OPPOSITE of what I want.

It seems that when I click the checkbox the first time (to uncheck it), the Javascript pulls an empty value. Only with the second click is it finding a value ('none').

Can anyone please tell me what I'm doing wrong? Thank you!

you may want to check your link from your html to your css.
When I run your code, with this alteration (html line3):

<div id="test01" style="width:200px; padding:15px; background-color:#ffc; display:block;">

the checkbox works correctly (is checked when page loads, Yellow Box shows when checkbox is checked, YB not displayed when checkbox is unchecked).

Hope this helps.

Thanks MHENRU. The CSS link is fine (in my example above, the CSS is in the <head> section so there IS no link). But in order for the Javascript to work, the display style apparently needs to be placed inline rather than in a style sheet.

What about this code:

<? 
	$isChecked = 1; // change it to 0 and then run
?>
<script language="javascript">
		function Toggle(id,chk) 
		{
			if(chk)
			{
				document.getElementById(id).style.display = "block";
			} 			
			else 
			{
				document.getElementById(id).style.display = "none";
			}
		}
</script>

	<input type="checkbox" name="" <?=($isChecked == 1)?('checked'):('');?> onclick="Toggle('test01',this.checked)" /> Yellow Box<br />

	<div id="test01" style="display:<?=($isChecked == 1)?('block'):('none');?>;">
		This should show up when you click Yellow Box. And it should go away when you click it again.
	</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.