how to make a "Tr" visiable and invisable based on radio buttonlist click

Question

hi. i have an 2 "tr" under

1. tr one have an file upload control

2. tr two have an textbox control.

   so i have an radio button list woth three values 1:image 2:video 3:Audio by default i need to show file upload control visiable that is the 1"tr". but once user clicks on video/audio option in radio button list then i need to make 2 "tr" visiable[ textbox] and 1"tr" invisiable[fileupload control] so how can i achive this functionality in javascript

   thank you

Answer 1

Give each row an id

<tr id="...">

Then set its visibility to hidden

document.getElementById("someID").style.display = 'none';

If you're using jQuery(and you should) you can make it really nifty with

$("#someID").slideToggle()

The nice part about that is that it keeps track of if the element is hidden or visible for you.

Answer 2

So for this there is a simple answer and a complicated answer. The main problem is how events are handled in IE. In particular the "change" event only fires after you click the radio button and then click another element on the page. In most of the other browsers it works fine.

For the simple answer my first response would be (assuming you are using jquery):

$("#idofyourradiobutton").change(function() {
  // Do stuff here like hide or show
  $('#trid').hide();
});

If you want full browser compatibility and you are worried about accessibility using the keyboard then follow this question's back and forth...

SO Question #1720093

Answer 3

I leave the ASP to you...

jQuery:

$(document).ready(function() {
    // hide both rows to start
    $('.foo').hide(); 
    // bind the right event based on browser
    $('.radios').bind(($.browser.msie ? "click" : "change"), function() {
          if($('#a').is(':checked') || $('#b').is(':checked')) {$('#file-upload').hide(); $('#text-box').show();}
      else if($('#c').is(':checked')){$('#text-box').hide(); $('#file-upload').show();}
    });
});

HTML:

  <form id="myform">
    <input class="radios" type="radio" name="radio-1" id="a" value="a"/>A<br/>
    <input class="radios" type="radio" name="radio-1" id="b" value="b"/>B<br/>
    <input class="radios" type="radio" name="radio-1" id="c" value="c"/>C<br/>
  <table>
    <tr class="foo" id="file-upload"><td><input type="textbox" value="file upload"/></td></tr>
    <tr class="foo" id="text-box"><td><input type="textbox" value="text box"/></td></tr>
  </table>
  </form>

Answer 4

Try the following:

script in head tag:

 <script language="javascript" type="text/javascript">
    function toggletr(val)
    {

    document.getElementById('trImg').style.display=(val==1)?'block':'none';
    document.getElementById('trUrl').style.display=(val==1)?'none':'block';

    }
    </script>

under body section :

<table>
                <tr id="trImg" style="display:block">
                    <td>
                        Image:</td>
                    <td>
                        <asp:FileUpload ID="fuIage" runat="server" /></td>
                </tr>
                <tr id="trUrl" style="display:none">
                    <td>
                        Audio/Video Url:</td>
                    <td>
                        <asp:TextBox ID="txtUrl" runat="server" /></td>
                </tr>
            </table>
            <asp:RadioButtonList ID="rdbLst2" runat="server">
                <asp:ListItem Value="1" Selected="True" onclick="javascript:toggletr(1);">image </asp:ListItem>
                <asp:ListItem Value="2" onclick="javascript:toggletr(2);">Video </asp:ListItem>
                <asp:ListItem Value="3" onclick="javascript:toggletr(3);">Audio </asp:ListItem>
            </asp:RadioButtonList>