Solved

Dynamic CheckBox to fold/unfold choices.

Posted on 2004-10-04
7
562 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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

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!

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

719 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