javascript - 如何在 RadioButton-Selection 上调用 Javascript 函数？

Question

这就是我的 RadioButtonList 的外观(ASP.NET):

<asp:RadioButtonList ID="RadioButtonListGutscheinArt" Visible="true" runat="server">
      <asp:ListItem ID="ListItemZugAbonnement" Value="1" Selected="True" />
      <asp:ListItem ID="ListItemBestellungHalbtax" Text="Bestellung Halbtax" Value="2" />
</asp:RadioButtonList>

我还创建了一个名为 backendClick() 的 Javascript 函数，它可以对页面上的元素进行动画处理......

function backendClick() {
            $("#PanelPassnummer").fadeIn();
            $("#textbox").animate({ height: '795px' }, "slow");
            $('#Wrapper').animate({ paddingBottom: '20%' }, "slow");
            $('html,body').animate({ scrollTop: $("#weiterButtonAbstand").offset().top }, "slow");
            $('#weiterButtonAbstand').animate({ marginBottom: '8%' }, "slow");
}

我的目标是在选择 ListItemBestellungHalbtax 时执行函数 backendClick()。 NOT CLICKED，该函数将在页面重新加载时执行，因此该按钮在页面加载时已被选中。

现在在我的 C# 代码后面，我尝试了这样的操作:(在 protected void Page_Load 中)

if(RadioButtonListGutscheinArt.SelectedValue == Convert.ToString(2))
  {
          Page.ClientScript.RegisterStartupScript(this.GetType(), "Callfunction", "backendClick()", true);     

  }

但是没有成功......关于如何做有什么建议吗？如果需要更多信息，请告诉我。谢谢

Answer 1

当使用asp控制客户端的ID变化时，这解释了为什么你的jquery函数不起作用。您应该将 ClientIDMode="Static" 添加到您的 asp 控件以保持相同的 ID。

所以试试这个:

<asp:RadioButtonList ID="RadioButtonListGutscheinArt" ClientIDMode="Static" Visible="true" runat="server">
      <asp:ListItem ID="ListItemZugAbonnement" ClientIDMode="Static" Value="1" Selected="True" />
      <asp:ListItem ID="ListItemBestellungHalbtax" ClientIDMode="Static" Text="Bestellung Halbtax" Value="2" />
</asp:RadioButtonList>

现在 JQuery 选择器将适合您。试试这个:

$('#RadioButtonListGutscheinArt input').change(
    function(event){
        if ($(this).is(':checked') && event.target.id=="ListItemBestellungHalbtax") {
            backendClick();
        }
    });

为了在每次页面重新加载时调用该函数，您可以使用:

$(document).ready(function(){
   backendClick();
   //will check the radio button every time
   $('#ListItemBestellungHalbtax').attr('checked', true);
});

祝你好运。