在 aspx 页面上显示带有 javascript 单选按钮的 div答案

【问题标题】：Showing div with javascript radiobutton on aspx page在 aspx 页面上显示带有 javascript 单选按钮的 div
【发布时间】：2016-12-26 17:51:36
【问题描述】：

我正在尝试显示包含通过单选按钮事件的 div。我试图用javascript做到这一点：

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

aspx 页面中的 HTML 看起来像这样 -

<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 语句。

此选项不起作用。

【问题讨论】：

我的服务器端：:RadioButtonList>

标签： javascript c# asp.net panel radiobuttonlist

【解决方案1】：

下面是一个非常简单的、纯客户端使用 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>

【讨论】：