Solved

Dynamic CheckBox to fold/unfold choices.

Posted on 2004-10-04
7
552 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

738 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