Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts

    to check a checkbox

    I am trying to write a very simple bit of script to show or hide a div when a checkbox is checked or unchecked.

    Everytime the script seems to lock up, usually not allowing the state of the checkbox to be changed (checked to unchecked or visa versa).

    I've tried several ways to perform the task but to no avail.
    One of my many attampts:
    Code:
    function logoCost(){
      if (document.getElementById('logoPrinting').checked=true){
        document.getElementById('logoPrompt').style.display = 'block';
      }else{
        document.getElementById('logoPrompt').style.display = 'none';
      }
    }
    Any ideas? It's rather frustrating me now.

    Many thanks

    Justin

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Full working sample:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript">
    function showHideDiv(chkbx, e)
    {
       var element = document.getElementById?document.getElementById(e):document.all?document.all[e]:document.layers?document.layers[e]:null;
       if (element == null) return;
    
       if (!chkbx.checked)
       {
          if (element.style)
          {
             element.style.visibility = "visible";
             element.style.display = "block";
          }
       }
       else
       {
          if (element.style)
          {
             element.style.visibility = "hidden";
             element.style.display = "none";
          }
       }
    }
    </script>
    </head>
    
    <body>
    <form name="f1" id="f1">
    <input type="checkbox" name="chk1" id="chk1" value="0" onclick="showHideDiv(this, 'div1')">
    <div id="div1">hey there, this is a div to be shown or hidden.</div>
    <div id="div2">this is a div that is always here</div>
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks nikkiH,
    I had just realised that I missed an = (==) and seems to work now
    Code:
    function logoCost(){
      if (document.getElementById('logoPrinting').checked==true){
        document.getElementById('logoPrompt').style.display = 'block';
      }else{
        document.getElementById('logoPrompt').style.display = 'none';
      }
    }
    Will try your example though as is more useful...
    I will post back shortly....
    Last edited by Keltoi; 09-15-2006 at 03:45 PM. Reason: ==

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by nikkiH View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    >>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    It is generally advisable to use a complete doctype to help establish better x-browser consistency.

    Also, I know it was a quick demo, but you failed to close the form element, although it's worth noting that the checkbox will still function (and validate) perfectly well even without placing it within a form element.
    What this means for AT usability/accessibility is open to debate.

    - - -

    A tighter solution…
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>test</title>
    	<style type="text/css">
    
    		.unseen {
    			display: none;
    		}
    
    	</style>
    	<script type="text/javascript">
    
    		function showHideDiv(chkbx, e) {
    
    			if (!document.getElementById) return;
    
    			var obj = document.getElementById(e);
    
    			obj.className = (chkbx.checked) ? 'unseen' : '';
    
    		}
    
    	</script>
    </head>
    
    <body>
    
    <form action="./" name="f1" id="f1">
    <div>
    	<label>
    		<input type="checkbox" name="chk1" id="chk1" value="0" onclick="showHideDiv(this, 'div1')">
    		Hide the div?
    	</label>
    </div>
    </form>
    
    <div id="div1">hey there, this is a div to be shown or hidden.</div>
    <div id="div2">this is a div that is always here</div>
    
    </body>
    </html>
    I've used embedded js and CSS here, for the sake of simplicity in the demo. I'd normally place both into external files.
    However, I've reflected the worthy ideals of separation by not using js to directly manipulate the style property of an element (as NikkiH had done in her example).
    Separation means not only keeping js and CSS out of the markup, but also keeping a distance between js and the presentation layer, by using it to alter the markup (e.g. a class attribute value) and then having the consequences of that change stored in the stylesheet, where the details of the presentational info should be kept.
    Last edited by Bill Posters; 09-15-2006 at 04:00 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    reply to nikkiH's post...
    Sorry for the delay,
    the visability and display parts of the function seemed to be the wrong way around. All working though.
    Seems overly complex, but I'm just a novice programmer in JavaScript so I bow to your superior knowledge.

    Many thanks

    Justin
    Last edited by Keltoi; 09-15-2006 at 05:27 PM. Reason: just seen there was another reply...

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Bill Posters


  •  

    Posting Permissions

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