?
Solved

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

Posted on 2005-04-20
10
Medium Priority
?
1,976 Views
Last Modified: 2009-12-16
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
0
Comment
Question by:mrduckers
10 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13823252
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13823538
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
 
LVL 16

Expert Comment

by:ellandrd
ID: 13825081
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:dakyd
ID: 13825653
<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
 
LVL 25

Expert Comment

by:archrajan
ID: 13827151
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13827567
Pls post back once u see that link, i shud delete them from my website!
0
 
LVL 19

Expert Comment

by:dakyd
ID: 13827971
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
 
LVL 25

Expert Comment

by:archrajan
ID: 13828087
if u cannot differentiate between those 2 pages, then u definitely need a pair of glasses ;)
0
 
LVL 3

Expert Comment

by:hemebond
ID: 13829868
<!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
 

Author Comment

by:mrduckers
ID: 13829895
points to first working answer, thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question