Dynamically hide/show portion of HTML when checkbox is selected

**fred2028** · 01-21-2011, 06:53 PM

I need to be able to dynamically show part of HTML when a checkbox is selected, and hide it again when the checkbox is deselected. This part of HTML will contain form elements and anything entered in them need to be cleared when the checkbox is deselected. How can I do this?

**djr33** · 01-21-2011, 10:40 PM

Create a form with an id of "myform" (at least that is for this example). And create a div with an id of "myhide".

Code:

//show the div:
document.getElementById('myhide').style.display = "block";

//hide the div:
document.getElementById('myhide').style.display = "none";

//clear the form:
document.getElementById('myform').reset();

Of course you will need to apply those in the right locations. If you're using a checkbox, then you can apply the code using onchange="showhide();"

Here's the function for showhide(). Place this in your head section.

Code:

<script type="text/Javascript">
function showhide() {
   if (document.getElementyById('myhide').style.display = "none") {
      //show the div:
      document.getElementById('myhide').style.display = "block";
   }
   else {
      //hide the div:
      document.getElementById('myhide').style.display = "none";
      //clear the form:
      document.getElementById('myform').reset();
   }
}
</script>

**Nile** · 01-21-2011, 10:48 PM

Similarly:

HTML Code:

<!DOCTYPE html>
<html>
<head>
	<title>Checkbox</title>
	<script type="text/javascript">
		var checkDisplay = function(check, form) { //check ID, form ID
			form = document.getElementById(form), check = document.getElementById(check);
			check.onclick = function(){
				form.style.display = (this.checked) ? "block" : "none";
				form.reset();
			};
			check.onclick();
		};
	</script>
</head>
<body>
	<input type="checkbox" id="check" />
	<form id="form">
		<input type="checkbox" /><input type="text" />
	</form>
	<script type="text/javascript">
	checkDisplay("check", "form");
	</script>
</body>
</html>

Thread: Dynamically hide/show portion of HTML when checkbox is selected

Thread Tools

Search Thread

Dynamically hide/show portion of HTML when checkbox is selected

Bookmarks

Bookmarks

Posting Permissions