显示面板基于单选按钮上选择（S）

Question

我现在有我的网页上下面的代码：

<asp:RadioButtonList id="GroupButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal"> 
    <asp:ListItem Value="0" selected="true" /> 
    <asp:ListItem Value="1" /> 
    <asp:ListItem Value="2" /> 
    <asp:ListItem Value="3" /> 
    <asp:ListItem Value="4" /> 
    <asp:ListItem Value="5" /> 
    <asp:ListItem Value="6" /> 
    <asp:ListItem Value="7" /> 
</asp:RadioButtonList> 
<asp:Panel ID="GroupPanel" runat="server"> 
    <b>How can we improve our service?</b><br /> 
    <asp:TextBox ID="GroupTextBox" runat="server" /> 
</asp:Panel> 

此代码也多次在不同部分（IndividualButtons/IndividualPanel，EducationButtons/EducationPanel等）

我试图找出一个很好的解决方案执行以下操作：

• 当单选按钮列表中选定的值是0或5-7，隐藏相关的面板。
• 当所选值为1-4时，显示关联的面板。
• 让此代码适用于所有部分，以避免膨胀（如果可能）。

有什么建议吗？

编辑：下面的代码让我的GroupPanel面板隐藏并显示每次GroupButtons选择更改。但是，我需要它显示1-4，并隐藏0和5-7。

<script src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript"> 
    var id = '<%= GroupButtons.ClientId %>_0'; 
     $(function() { 
     var i = 0 

     $('#<%= GroupButtons.ClientId %> :radio').click(function(){ 
      if ($(this).attr('id') != id) { 
       $('#<%= GroupPanel.ClientId%>').toggle(); 
       id = $(this).attr('id'); 
      } 
     }); 
     }); 
</script> 

Answer 1

使用asp.net： 这是代码，您将在SelectedIndexChanged事件使用：

您可以创建一个列表（值要显示面板），并检查是否选择值在该列表中存在。

List<string> displayList = new List<string> { "1", "2", "3","4" }; 
GroupPanel.Visible = displayList.Contains(GroupButtons.SelectedValue) ? true : false; 

由于这是重复不同的部分，您可以用获取属性的业务对象创建列表，并在代码中使用它后面来检查值。

既然现在你已经更新的问题，并正在寻找在客户端的东西，这可能会帮助：

小提琴：http://jsfiddle.net/W4Km8/2174/

该如何你的代码如下：

<div class="toggleDisplay"> 
      <asp:RadioButtonList ID="GroupButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal"> 
       <asp:ListItem Value="0" Selected="true" /> 
       <asp:ListItem Value="1" /> 
       <asp:ListItem Value="2" /> 
       <asp:ListItem Value="3" /> 
       <asp:ListItem Value="4" /> 
       <asp:ListItem Value="5" /> 
       <asp:ListItem Value="6" /> 
       <asp:ListItem Value="7" /> 
      </asp:RadioButtonList> 
      <asp:Panel ID="GroupPanel" runat="server"> 
       <b>How can we improve our service?</b><br /> 
       <asp:TextBox ID="GroupTextBox" runat="server" /> 
      </asp:Panel> 
     </div> 

     <div class="toggleDisplay"> 
      <asp:RadioButtonList ID="EducationButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal"> 
       <asp:ListItem Value="0" Selected="true" /> 
       <asp:ListItem Value="1" /> 
       <asp:ListItem Value="2" /> 
       <asp:ListItem Value="3" /> 
       <asp:ListItem Value="4" /> 
       <asp:ListItem Value="5" /> 
       <asp:ListItem Value="6" /> 
       <asp:ListItem Value="7" /> 
      </asp:RadioButtonList> 
      <asp:Panel ID="EducationPanel" runat="server"> 
       <b>How can we improve our service?</b><br /> 
       <asp:TextBox ID="TextBox1" runat="server" /> 
      </asp:Panel> 
     </div> 

说明：将按钮和面板放入一个带有一类toggleDisplay的div中。 重要的一点是面板ID应该以“Panel”结尾，因为我们将在jQuery中使用它。

这是将在脚本标签去：

$(document).ready(function() { 
     $(this).find("[id$='Panel']").hide(); 
     $(".toggleDisplay").change(function() { 
      var groupName = $(this).find(":radio").attr('name'); 
      var ans = $('input[name="' + groupName + '"]:radio:checked').val(); 
      var displaylist = ["1", "2", "3", "4"]; 
      if (displaylist.indexOf(ans) > -1) { 
       $(this).find("[id$='Panel']").show(); 
      } else { 
       $(this).find("[id$='Panel']").hide(); 
      } 
    }); 
}); 

因此，与一类toggleDisplay的东西会触发该脚本。