ASP.NET RadioButtonList Jquery Onchange 事件答案

【问题标题】：ASP.NET RadioButtonList Jquery Onchange eventASP.NET RadioButtonList Jquery Onchange 事件
【发布时间】：2019-11-16 22:08:45
【问题描述】：

我有一个包含 3 个项目的 asp.net RadioButtonList。当用户单击我希望触发我的 JQuery 并获取选择了哪个单选按钮的任何项目时，我将使用该值来确定隐藏/显示 <div>。

这是我的 RadioButtonList 的样子：

asp:RadioButtonList ID="rblAnswers" runat="server"
                RepeatDirection="Horizontal"
                CssClass="form-control FormatRadioButtonList"
                RepeatLayout="Table">
                <asp:ListItem>Yes</asp:ListItem>
                <asp:ListItem>No</asp:ListItem>
                <asp:ListItem>Maybe</asp:ListItem>
            </asp:RadioButtonList>

这是我的 JQuery 事件：

$(document).ready(function () {
    $('#<%=rblAnswers.ClientID %>').change(function () {
        $(this).click(function () {
            alert((this).value);
        });
    });
});

但是它似乎不起作用，我什至尝试只显示一条警报消息，看看我是否可以让我的 Jquery 命中（我有其他 Jquery 在其他地方工作，所以我知道它已链接到我的项目中正确。）

$('#<%=rblAnswers.ClientID %>').change(function () {
    alert("TEST");
});

我哪里错了？如何在我的单选按钮列表上使用 Jquery 更改事件来获取所选单选按钮的值？

编辑

这是在 html 中呈现的方式

<table id="ctl00_ContentPlaceHolder2_rblAnswers" class="form-control FormatRadioButtonList">
<tbody>
    <tr>
        <td>
            <input id="ctl00_ContentPlaceHolder2_rblAnswers_0" type="radio" name="ctl00$ContentPlaceHolder2$rblRework" value="Yes">
            <label for="ctl00_ContentPlaceHolder2_rblAnswers_0">Yes</label>
        </td>
        <td>
            <input id="ctl00_ContentPlaceHolder2_rblAnswers_1" type="radio" name="ctl00$ContentPlaceHolder2$rblAnswers" value="No">
            <label for="ctl00_ContentPlaceHolder2_rblAnswers_1">No</label>
        </td>
        <td>
            <input id="ctl00_ContentPlaceHolder2_rblAnswers_2" type="radio" name="ctl00$ContentPlaceHolder2$rblAnswers" value="Maybe">
            <label for="ctl00_ContentPlaceHolder2_rblAnswers_2">Maybe</label>
        </td>
    </tr>
</tbody>

【问题讨论】：

您确定'#<%=rblRework.ClientID %>' 以您期望的方式呈现吗？

标签： jquery asp.net

【解决方案1】：

RadioButtonList 控件默认呈现具有您在控件上指定的 ID 的 table 元素。在这个table 中是您的单选按钮。

例如，这是您的控件的呈现方式：

<table id="rblAnswers" class="form-control FormatRadioButtonList">
  <tbody>
    <tr>
      <td>
        <input id="rblAnswers_0" type="radio" name="rblAnswers" value="Yes">
        <label for="rblAnswers_0">Yes</label>
      </td>
      <td>
        <input id="rblAnswers_1" type="radio" name="rblAnswers" value="No">
        <label for="rblAnswers_1">No</label>
      </td>
      <td>
        <input id="rblAnswers_2" type="radio" name="rblAnswers" value="Maybe">
        <label for="rblAnswers_2">Maybe</label>
      </td>
    </tr>
  </tbody>
</table>

这意味着您的输入是 ID 为 rblAnswers 的元素的后代。因此，要使用 jQuery 定位单选按钮输入，您可以使用：

$('#<%=rblAnswers.ClientID %> input').change(function () {
    alert($(this).value);
});

【讨论】：

既然是jQuery，那么就不用alert($(this).value);我们可以用 val() 替换 value，如下所示： alert($(this).val());

【解决方案2】：

在<asp:ListItem> 上使用onclick

            <asp:RadioButtonList ID="rblAnswers" runat="server"
                RepeatDirection="Horizontal"
                CssClass="form-control FormatRadioButtonList"
                RepeatLayout="Table">
                   <asp:ListItem  Value="y" onclick="alert(this.value)" Text="Yes"></asp:ListItem>
                   <asp:ListItem Text="No"></asp:ListItem>
            </asp:RadioButtonList>

【讨论】：

【解决方案3】：

经过测试和工作的代码

$("[id*=rblAnswers] input").on("click", function () {
        var selectedValue = $(this).val();
        var selectedText = $(this).next().html();
        alert("Selected Text: " + selectedText + " Selected Value: " + selectedValue);
    });

推荐人：jqueryfaqs

【讨论】：