Advanced Search

Results 1 to 3 of 3

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

  1. #1
    Join Date
    Sep 2005
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Dynamically hide/show portion of HTML when checkbox is selected

    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?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    260
    Thanked 690 Times in 678 Posts

    Default

    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>
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •