Solved

Dynamic CheckBox to fold/unfold choices.

Posted on 2004-10-04
7
539 Views
Last Modified: 2008-02-01
I have a checkbox in html and when it's clicked I want two table rows to appear and I suppose when it's unclicked they fold up - how does one accomplish this?

0
Comment
Question by:dylanone
  • 4
  • 2
7 Comments
 
LVL 19

Expert Comment

by:peh803
ID: 12218612
you'd do something like this:

<script type="text/javascript">
  function doIt(){
    var objStateInput = document.getElementById('state');
    var lCurrentState = objStateInput.value;
    if (lCurrentState==0){
      objStateInput.value=1;
      document.getElementById('my_text').style.display='block';
    }    
    else
    {
      objStateInput.value=0;
      document.getElementById('my_text').style.display='none';
    }
}
</script>
<input type=checkbox name="my_check" id="my_check" onclick="doIt();">
<input type=hidden name=state value=0>
<span id="my_text" style="display: none;">
  Here's row 1<BR>
  Here's row 2
</span>
0
 
LVL 19

Expert Comment

by:peh803
ID: 12218630
please note that the formatting of exactly where / how you want to display the checkbox and text is totally up to you.  You could use table structures or whatever other html elements you'd want.  If you would like help implementing a different look / feel, let me know.  I have just used the above example to demonstrate the showing / hiding based on clicking a checkbox for ultimate simplicity.

Please let me know if you have any questions.

regards,
peh803
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12218645
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
      function test()
      {
            selectObj = document.getElementById("s1");
            
            selectedIndex = selectObj.options.selectedIndex;
            
            txt = selectObj.options[selectedIndex].text;
            
            if (txt == "hide")
            {
                  document.getElementById("row1").style.display = 'none';
                  document.getElementById("row2").style.display = 'none';
            }
            if (txt == "display")
            {
                  document.getElementById("row1").style.display = 'block';
                  document.getElementById("row2").style.display = 'block';
            }
      }
</script>

<style>
</style>

</HEAD>

<BODY>

<table>
      <tr>
            <td>
                  <form name="f1" id="f1" action="http://1.1.1">
                        <select name="s1" id="s1" onChange="test()">
                              <option>display</option>
                              <option>hide</option>
                        </select>
                  </form>
            </td>
      </tr>
      <tr id="row1" id="row1">
            <td>Row 1</td>
      </tr>
      <tr id="row2" id="row2">
            <td>Row 2</td>
      </tr>
</table>

</BODY>
</HTML>
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

Author Comment

by:dylanone
ID: 12219278
Here is what I currently have using the first example posted but the two rows labeled id and class always appear either if I click the boc or not:

<table border="1" cellpadding="2" cellspacing="3" align="center">
      <tr><td><font face="Arial">Addition</font></td></tr>
      
<script type="text/javascript">
  function doIt(){
    var objStateInput = document.getElementById('state');
    var lCurrentState = objStateInput.value;
    if (lCurrentState==0){
      objStateInput.value=1;
      document.getElementById('my_text').style.display='block';
    }    
    else
    {
      objStateInput.value=0;
      document.getElementById('my_text').style.display='none';
    }
}
</script>
<tr><td><input type=checkbox name="my_check" id="my_check" onclick="doIt();"></td></tr>
<input type=hidden name=state value=0>
<span id="my_text" style="display: none;">
<tr><td>ID:</td><td><input type="Text" name="id" value="<%=rsid(0)%>" size="20" READONLY></td></tr>      
<tr><td>Class:</td><td><input type="Text" name="class" size="20"></td></tr>
</span>
            
</table>
0
 
LVL 19

Accepted Solution

by:
peh803 earned 50 total points
ID: 12219406
@dylanone --

You can't wrap a span tag around <tr><td> tags and use it this way.  Try modifying your above code to this (I've put the style tags inside a TD and then nested your content in a sub-table) -- you should get exactly what you're looking for!

Thanks,
peh803

<!--
you should probably keep the javascript separate from the html...typically, people will put javascript in between <head> tags.  This is "good practice", but it's not absolutely necessary for the javascript to work correctly.  For now, I'll just put it above the html...
-->
<script type="text/javascript">
  function doIt(){
    var objStateInput = document.getElementById('state');
    var lCurrentState = objStateInput.value;
    if (lCurrentState==0){
      objStateInput.value=1;
      document.getElementById('my_text').style.display='block';
    }    
    else
    {
      objStateInput.value=0;
      document.getElementById('my_text').style.display='none';
    }
}
</script>

<table border="1" cellpadding="2" cellspacing="3" align="center">
     <tr><td><font face="Arial">Addition</font></td></tr>
     
<tr><td><input type=checkbox name="my_check" id="my_check" onclick="doIt();"></td></tr>
<input type=hidden name=state value=0>
<tr><td id="my_text" style="display:none;">
  <table cellpadding=0 cellspacing=0 width=100%>
    <tr><td>ID:</td><td><input type="Text" name="id" value="<%=rsid(0)%>" size="20" READONLY></td></tr>    
    <tr><td>Class:</td><td><input type="Text" name="class" size="20"></td></tr>
  </table>
</td></tr>
</table>
0
 

Author Comment

by:dylanone
ID: 12219522
Beautiful - Thanks!
0
 
LVL 19

Expert Comment

by:peh803
ID: 12219559
Glad to help!

peh803
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

830 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