onClick checkbox to show and hide a div area [DETECT IF CHECKED ON LOAD]

Using the code below i can click to check and show the hidden div and then uncheck to hide the div.

My question is that, how can i when loading the page check whether the check box is already checked when the page loads and show or hide the hidden div depending on this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
function comm_direct_change(checked){
     document.getElementById('direct').style.display = checked?"block":"none";
}
</script>
<input type="checkbox" onclick="comm_direct_change(this.checked)">Show
<div style="display: none;" id="direct" class="result">
content
</div>
</BODY>
</HTML>

Regards, dt
mrduckersAsked:
Who is Participating?
 
BatalfCommented:
an onload event which calles the comm_direct_change() function should do it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
function checkStatus(){
    comm_direct_change(document.getElementById('myCheckbox').checked);
   
}
function comm_direct_change(checked){
     document.getElementById('direct').style.display = checked?"block":"none";
}
window.onload=checkStatus;
</script>
</head>
<body>

<form>
<input type="checkbox" id="myCheckbox" onclick="comm_direct_change(this.checked)" checked>Show
<div style="display: none;" id="direct" class="result">
content

</form>
</div>
</BODY>
</HTML>
0
 
archrajanCommented:
No-points for me
be careful with the window.onload event,
if u have a body onload event also on ur page it will be over ridden
and also
sometimes the onload event fires just too quickly before the other elements of the page are loaded so u can safely put ur function like this

<script>
checkStatus();
</script>

and place this just before the closing body </body> tag to make sure the page is been loaded completely and all the elements are available for the script
0
 
ellandrdCommented:
sorry to but in, but here is another example using radio buttons, but can be changed to use checkboxes very easy.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
<!--
function render(c, t)
{
     if (c.checked)
     {
          document.getElementById(t).style.display="block"
     }
     else
     {
          document.getElementById(t).style.display="none"
     }
}
//-->
</script>
</head>
<body>
<form name="settings" method="post">
<p>
     <input type="radio" value="US" name="countries" onClick="render(this, 'tblUS'); document.getElementById('tblCanada').style.display='none'; document.getElementById('tblOther').style.display='none';">US<br>
     <input type="radio" value="Canada" name="countries" onClick="render(this, 'tblCanada'); document.getElementById('tblUS').style.display='none'; document.getElementById('tblOther').style.display='none';">Canada<br>
     <input type="radio" value="Other" name="countries" onClick="render(this, 'tblOther'); document.getElementById('tblUS').style.display='none'; document.getElementById('tblCanada').style.display='none';">Other<br>
</p>
<table id="tblUS" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="25%"><b>Select State<b></td>
          <td width="25%"><input type="text" value="" name="State"></td>
     </tr>
     <tr>
          <td width="25%">Zip Code</td>
          <td width="25%"><input type="text" value="" name="zipcode"></td>
     </tr>
</table>
<table id="tblCanada" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="25%"><b>Select Province<b></td>
          <td width="25%"><input type="text" value="" name="Province"></td>
     </tr>
     <tr>
          <td width="25%">Postal Code</td>
          <td width="25%"><input type="text" value="" name="postalcode"></td>
     </tr>
</table>
<table id="tblOther" style="display:none" width="50%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="25%"><b>Select Country<b></td>
          <td width="25%"><input type="text" value="" name="country"></td>
     </tr>
     <tr>
          <td width="25%">State</td>
          <td width="25%"><input type="text" value="" name="state"></td>
     </tr>
     <tr>
          <td width="25%">Province</td>
          <td width="25%"><input type="text" value="" name="province"></td>
     </tr>
     <tr>
          <td width="25%">Region</td>
          <td width="25%"><input type="text" value="" name="region"></td>
     </tr>
</table>
</form>
</body>
</html>

Ellandrd
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
dakydCommented:
<no points for me>

>> sometimes the onload event fires just too quickly before the other elements of the page are loaded so u can safely put ur function like this

archrajan, that sounds wrong, can you show an example of this behavior?  For example, here's a sample using both your suggestion and an onload handler.  Notice that the onload alert fires after the one embedded in script.  Waiting until the entire page is loaded is exactly what a window.onload handler is supposed to do.  But like I said, if I'm wrong, just show me an example, and I'll learn something new.

<html>
<head>
<script type="text/javascript">
window.onload = function() {alert("alert coming from onload event");};
</script>
</head>

<body>
<h4>Header</h4>
<p>Just some text, not important at all</p>

<script type="text/javascript">
alert("alert coming right before closing body tag");
</script>
</body>
</html>
0
 
archrajanCommented:
DAKYD
HERE IS THE EXAMPLE YOU REQUESTED, WITHOUT ACTUALLY UNDERGOING THAT KIND OF PROBLEM, I WILL NOT POST IT.

Take a look at this:
http://www.archanapatchirajan.com/defineview.html (with the scripts called onload event of body tag, look how the page looks.... the script is not working at alll)

http://www.archanapatchirajan.com/defineview1.html (with the scripts places just before the </body> tag the script works perfect and the page loads perfect)

NOTE: PLEASE CHECK THEM IN INTERNET EXPLORER

Also, ur example is so simple and its a static page, problems will not occur there, But remember we are not always using .html and static files, mine is a jsp file, but i have the view source in there u can check it out... u can also compare both the files, they are just the same with the difference of where the function is called!

LET ME KNOW IF U HAVE FURTHER DOUBTS
0
 
archrajanCommented:
Pls post back once u see that link, i shud delete them from my website!
0
 
dakydCommented:
archrajan,
  Calm down, no need to yell.  I looked at both pages you posted, they look identical to me, and I don't get an error for either one.  But, let's not pollute this thread, I've posted a Q in the Miscellaneous TA:

http://www.experts-exchange.com/Miscellaneous/Q_21396332.html
0
 
archrajanCommented:
if u cannot differentiate between those 2 pages, then u definitely need a pair of glasses ;)
0
 
hemebondCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21395578.html</title>
      </head>
      <body>
            <input id="show" type="checkbox"><label for="show">Show</label>

            <div id="direct">
                  content
            </div>

            <script type="text/javascript">
                  function commDirectToggle()
                  {
                        document.getElementById('direct').style.display = document.getElementById('show').checked ? 'block' : 'none';
                  }

                  document.getElementById('show').onclick = commDirectToggle;
                  commDirectToggle();
            </script>
      </body>
</html>
0
 
mrduckersAuthor Commented:
points to first working answer, thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.