在 asp.net 中获取 Wizard 控件中的 RadioButtonList

Getting RadioButtonList inside Wizard control in asp.net

我在两个 WizardSteps 的第一个 WizardSteps 中有一个 asp:Wizard 控件和 asp:RadioButtonList。我想从 javascript 获取所选单选按钮的文本和值,但无法获取结果。我需要别人的帮助。我的代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WizardRadioButtonListDemo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var servieTypes = document.getElementById('<%=Wizard1.FindControl("rdoServiceType").ClientID%>');

            $(servieTypes + ' input').click(function () {
                var selectedText = $(this).text();
                var selectedValue = $(this).val();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
                <WizardSteps>
                    <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
                        <fieldset id="Fieldset1" runat="server">
                            <legend id="Legend1" runat="server">Type</legend>
                            <asp:RadioButtonList ID="rdoServiceType" RepeatLayout="Flow" runat="server">
                                <asp:ListItem Text="Gold" Value="0">Gold</asp:ListItem>
                                <asp:ListItem Text="Siver" Value="1">Silver</asp:ListItem>
                                <asp:ListItem Text="Premium" Value="2">Premium</asp:ListItem>
                            </asp:RadioButtonList>
                        </fieldset>

                    </asp:WizardStep>
                    <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
                        <fieldset id="Fieldset2" runat="server">
                            <legend id="Legend2" runat="server">User</legend>
                            <asp:Label ID="lblFirstName" runat="server" Text="First Name" AssociatedControlID="txtFirstName"></asp:Label>
                            <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                            <asp:Label ID="lblLastName" runat="server" Text="Last Name" AssociatedControlID="txtLastName"></asp:Label>
                            <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                        </fieldset>
                    </asp:WizardStep>
                </WizardSteps>
            </asp:Wizard>
        </div>
    </form>
</body>
</html>

我的代码隐藏文件如下:

using System;

namespace WizardRadioButtonListDemo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                rdoServiceType.SelectedIndex = 0;
            }
        }
    }
}

这行得通。您很接近,但是 aspnet 将 RadioButton 文本放在 input 元素旁边的 label 中。所以它不是您可以使用 jQuery.

访问的 KeyValuePair
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Wizard1.FindControl("rdoServiceType").ClientID%> input').click(function () {
            var selectedText = $(this).next('label').text();
            var selectedValue = $(this).val();

            alert(selectedText + " - " + selectedValue);
        });
    });
</script>