как сделать "Tr" видимым и невидимым на основе клика по радио-кнопкам

Question

у меня есть 2 "tr" под

1. tr one имеет элемент управления загрузкой файлов

2. tr два имеют текстовое поле управления.

   поэтому у меня есть список переключателей с тремя значениями 1: Изображение 2: видео 3: Аудио по умолчанию мне нужно показать видимый элемент управления загрузкой файлов, который является 1 "tr". , но как только пользователь нажимает на опцию видео / аудио в списке переключателей, мне нужно сделать 2 "tr" visiable [текстовое поле] и 1 "tr" invisible [контроль загрузки файла] так как я могу достичь этой функциональности в JavaScript

   спасибо

Answer 1

Дайте каждой строке идентификатор

<tr id="...">

Затем установите его видимость скрытым

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

Если вы используете jQuery (и вам следует), вы можете сделать его действительно изящным с помощью

$("#someID").slideToggle()

Приятной особенностью этого является то, что он отслеживает, скрыт ли элемент или видим для вас.

Answer 2

Так что для этого есть простой ответ и сложный ответ. Основная проблема заключается в том, как события обрабатываются в IE. В частности, событие «изменение» возникает только после того, как вы щелкнули переключатель и затем щелкнули другой элемент на странице. В большинстве других браузеров работает нормально.

Для простого ответа мой первый ответ будет (при условии, что вы используете jquery):

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

Если вам нужна полная совместимость с браузером и вы беспокоитесь о доступности с помощью клавиатуры, следуйте этому вопросу взад и вперед ...

SO Вопрос № 1720093

Answer 3

Попробуйте следующее:

скрипт в заголовке:

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

под секцией тела:

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

Answer 4

Я оставляю вам ASP ...

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>