顯示面板基於單選按鈕上選擇（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的東西會觸發該腳本。