Solved

Dynamic CheckBox to fold/unfold choices.

Posted on 2004-10-04
7
532 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…
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…

777 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