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");
            }
     });
 });