Solved

Dynamic CheckBox to fold/unfold choices.

Posted on 2004-10-04
7
517 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

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…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now