Отображение панели (ы) на основе Radio Button Selected

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, отобразите соответствующую панель.
• Этот код работает для всех разделов, чтобы избежать раздувания (если возможно).

Любые предложения?

EDIT: следующий код получает панель PanelPanel, чтобы скрыть и показать каждый раз, когда изменяется выбор 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; 

Поскольку это повторяется в различных разделах, вы можете создать список в бизнес-объекте со свойством получить и использовать его в код, чтобы проверить значение.

Поскольку вы обновили вопрос сейчас и ищут что-то на стороне клиента, это может помочь:

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

Описание: Поместите кнопки и панель в div с классом toggleDisplay. Важным моментом здесь является идентификатор панели, который должен заканчиваться словом «панель», поскольку мы будем использовать это в 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 будет срабатывать этот сценарий.