asp.net 中RadioButtonList的選項改變事件處理（採用jquery操作）

實現的效果如下圖所示：

                                

可以設定RadioButtonList的autopostback屬性為true，然後處理其OnSelectedIndexChanged事件，但是這樣會造成回發事件，造成頁面重新整理，使用者體驗不好，於是這裡採用jquery來操作。

aspx中的頁面如下程式碼所示：

  <div style="height: 35px;">
      <table width="170px">
              <tr>
                    <td style="width:30px;">
                             <asp:Label ID="lblDate" runat="server" Text="對比:">
                                        </asp:Label></td>
                     <td style="width:80px;">
                                        <asp:DropDownList ID="ddlYear" runat="server" ></asp:DropDownList>年</td>
                      <td style="width:60px;">
                            <span id="divMonth" style="display:none;">
                                  <asp:DropDownList ID="ddlMonth" runat="server"></asp:DropDownList>月</span>
                     </td>
               </tr>
       </table>
  </div>
  <div style="height: 35px;">
        <asp:RadioButtonList runat="server" ID="rblType">
                   <asp:ListItem Value="年" Text="年同環比" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="月" Text="月同環比"></asp:ListItem>
         </asp:RadioButtonList>
   </div>

這裡使用jquery來處理RadioButtonList的change事件，程式碼如下：

 $(function () {
      $("#<%=rblType.ClientID %>").change(function () {
            var SelectVal = $(":input:radio[@name='#<%= rblType.ClientID%> > input'][checked]").val()
            if (SelectVal != "年") {
                  $("#divMonth").css("display", "block");
            }
            else {
                 $("#divMonth").css("display", "none");
            }
     });
 });

jquery中獲取RadioButtonList中選中的值方法：

 //獲取頁面載入時RadioButtonList選中的值
 var SelectVal = $(":input:radio[@name='#<%= rblType.ClientID%> > input'][checked]").val();

獲取ASP.NET DropDownList控制元件下拉選項改變時，顯示或隱藏某個控制元件的jquery寫法類似如下：

 $(function () {
      $("#<%=Comb_EnergyType.ClientID %>").change(function () {
          var SelectVal = $("#<%= Comb_EnergyType.ClientID%> option:selected").val();
            if (SelectVal == "01000") {
                $("#divSubEnergy").css("display", "block");
            }
            else {
                $("#divSubEnergy").css("display", "none");
            }
     });
 });