Member Avatar for johnnycho

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!

  • 3 Contributors
  • 3 Replies
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by vibhaJ

Recommended Answers

All 3 Replies

Member Avatar for MHENRU

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.

Edited by MHENRU because: &quot;javascript&quot; to &quot;html&quot; user reference
Member Avatar for johnnycho

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.

Member Avatar for vibhaJ

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.