2016-08-19 2 views
0

Я пытаюсь показать div, который содержит событие радио кнопки. Я пытался сделать это с помощью JavaScript:Показаны div с javascript radiobutton на странице aspx

<h2 style="text-align:center; color:aquamarine"><b>What would you like to do??</b></h2> 
    <asp:RadioButtonList ID="radioButtonList" runat="server"> 
     <asp:ListItem Text="Ask us" Value="1" Selected="False" /> 
     <asp:ListItem Text="Update Player" Value="2" Selected="False" /> 
     <asp:ListItem Text="Games" Value="3" Selected="False" /> 
    </asp:RadioButtonList> 
    <br /><br /><br /> 


    <div name="askUsdiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="askUsPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="updateInfoDiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="updatesPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="gamesDiv" runat="server" visible="false"> 
     <asp:Panel ID="GamesPanel" runat="server" /> 
    </div> 

и HTML в странице ASPX выглядит следующим образом -

<h2 style="text-align:center; color:aquamarine"><b>What would you like to do??</b></h2> 
    <asp:RadioButtonList ID="radioButtonList" runat="server"> 
     <asp:ListItem Text="Ask us" Value="1" Selected="False" /> 
     <asp:ListItem Text="Update Player" Value="2" Selected="False" /> 
     <asp:ListItem Text="Games" Value="3" Selected="False" /> 
    </asp:RadioButtonList> 
    <br /><br /><br /> 


    <div name="askUsdiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="askUsPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="updateInfoDiv" runat="server" visible="false"> 
     <asp:Panel runat="server" ID="updatesPanel"> 
      ... 
     </asp:Panel> 
    </div> 

    <div name="gamesDiv" runat="server" visible="false"> 
     <asp:Panel ID="GamesPanel" runat="server" /> 
    </div> 

Я также попытался сделать эту сторону об-сервера:

<asp:RadioButtonList ID="radioButtonList" runat="server" OnSelectedIndexChanged="radioButtonList_SelectedIndexChanged"> 
    <asp:ListItem Text="Ask us" Value="1" Selected="False" /> 
    <asp:ListItem Text="Update Player" Value="2" Selected="False" /> 
    <asp:ListItem Text="Games" Value="3" Selected="False" /> 
</asp:RadioButtonList> 
<br /><br /><br /> 

и мой код C# был с выражением if внутри события.

Ни один из этих вариантов не работает.

+0

Моей стороны сервера: <жереха: RadioButtonList ID = Runat = "сервер" "RadioButtonList" OnSelectedIndexChanged = "radioButtonList_SelectedIndexChanged"> <жерех : ListItem Text = "Ask us" Значение = "1" Selected = "False" />


ответ

0

Ниже приведен очень простой, чисто решение на стороне клиента с помощью JQuery:

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <style type="text/css"> 
     .choiceDiv 
     { 
      display:none; 
      border:2px solid red; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      $(".rad").click(function() { 
       var div = $(this).data("div"); 
       $(".choiceDiv").hide(); 

       if ($(this).is(':checked')) 
        $("#" + div).fadeIn('slow'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <input type="radio" class="rad" name="rad" data-div="askUsdiv" />Ask Us<br /> 
     <input type="radio" class="rad" name="rad" data-div="updateInfoDiv" />Update Player<br /> 
     <input type="radio" class="rad" name="rad" data-div="gamesDiv" />Games<br /> 
     <div id="askUsdiv" class="choiceDiv"> 
      <asp:Panel runat="server" ID="askUsPanel"> 
       Ask Us 
      </asp:Panel> 
     </div> 
     <div id="updateInfoDiv" class="choiceDiv"> 
      <asp:Panel runat="server" ID="updatesPanel"> 
       Update Player 
      </asp:Panel> 
     </div> 
     <div id="gamesDiv" class="choiceDiv"> 
      <asp:Panel ID="GamesPanel" runat="server"> 
       Games 
      </asp:Panel> 
     </div> 
    </form> 
</body>