javascript RadioButtonList ListItem OnClick 事件？

RadioButtonList ListItem OnClick event?

提问by MattR

I have a User Control which has a RadioButtonList on it.

我有一个用户控件，上面有一个 RadioButtonList。

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow"
RepeatDirection="Horizontal"  >
    <asp:ListItem Text="Yes" Value="Y" onClick="getCheckedRadio(true);" />
    <asp:ListItem Text="No" Value="N" onClick="getCheckedRadio(false);" />
</asp:RadioButtonList>

As you can see I initially had an onClick event set to activate a JavaScript function, which this code was on a page it worked fine, but since moving to a user control it has stopped calling it.

正如你所看到的，我最初设置了一个 onClick 事件来激活一个 JavaScript 函数，这段代码在页面上运行良好，但自从移到用户控件后，它停止调用它。

The code has the following message: "Validation (ASP.Net): Attribute 'onClick' is not a valid attribute of element 'ListItem'.

该代码包含以下消息：“验证 (ASP.Net)：属性 'onClick' 不是元素 'ListItem' 的有效属性。

Is there anyway that I can have an onClick style event which will call my function? I have seen some examples which constantly iterate through the items and then determine which is selected, but I have lots of these radio buttons so would prefer not to use that if possible.

无论如何，我可以有一个 onClick 样式事件来调用我的函数吗？我看过一些例子，它们不断地遍历项目，然后确定选择了哪个，但我有很多这样的单选按钮，所以如果可能的话，我宁愿不使用它。

回答by xDaevax

Consider putting this JQuery or some variation on your main form.

考虑将这个 JQuery 或一些变体放在你的主表单上。

//On document ready
$(function() {
    $("input[type='radio']").on('click', function(e) {
       getCheckedRadio($(this).attr("name"), $(this).val(), this.checked);
    });
});

//External function to handle all radio selections
function getCheckedRadio(group, item, value) {
    $(".group-label").text(group);
    $(".item-label").text(item);
    $(".item-value").text(value);
}

Then in your partial:

然后在你的部分：

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <asp:ListItem Text="Yes" Value="Y" />
    <asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>

This should handle all radio buttons (or at least the ones you target with the JQuery if you change it).

这应该处理所有单选按钮（或者至少是您使用 JQuery 更改的单选按钮）。

I have a working sample (without the .NET code) here that demonstrates the principle.

我在这里有一个工作示例（没有 .NET 代码）来演示原理。

http://jsfiddle.net/xDaevax/UwEN5/

http://jsfiddle.net/xDaevax/UwEN5/

Edit: Here is essentially what is happening behind the scenes.

编辑：这基本上是幕后发生的事情。

I'm not sure hownew you are to this, so I will go into a bit of detail here and I apologize if you already have a handle on some of these things.

我不确定您对此有多陌生，因此我将在此处详细介绍，如果您已经掌握了其中的某些内容，我深表歉意。

When you use .NET controls (asp:DropDownList, asp:RadioButtonList, asp:ListItem) these are all server-side representations of what will be generatedwhen the page is sent to a browser. The code you see in your .aspx page is not necessarily how the markup will be sent to the browser.

当您使用 .NET 控件（asp:DropDownList、asp:RadioButtonList、asp:ListItem）时，这些都是将页面发送到浏览器时将生成的内容的服务器端表示。您在 .aspx 页面中看到的代码不一定是将标记发送到浏览器的方式。

For example, the following code:

例如，以下代码：

<asp:Label ID="_CtlMyLabel" runat="server" Text="Label" />

Will be rendered in the browser HTML as:

将在浏览器 HTML 中呈现为：

<span id="_CtlMyLabel">Label</span>

If you were to wrap it in a panel:

如果要将其包装在面板中：

<asp:Panel ID="_CtlWrapperPanel" runat="server" ClientIDMode="Inherit">
    <asp:Label ID="_CtlMyLabel" runat="server" Text="Label" ClientIDMode="Inherit" />
</asp:Panel>

You would get:

你会得到：

<div id="_CtlWrapperPanel">
    <span id="_CtlMyLabel">Label</span>
</div>

When it comes to a RadioButtonList, the following asp:RadioButtonList:

说到RadioButtonList，下面的asp:RadioButtonList：

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <asp:ListItem Text="Yes" Value="Y" />
    <asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>

Will generate:

会产生：

<span id="rblMyOptions">
    <input id="rblMyOptions_0" type="radio" name="rblMyOptions" value="Y" />
    <label for="rblMyOptions_0">Yes</label>
    <input id="rblMyOptions_1" type="radio" name="rblMyOptions" value="N" />
    <label for="rblMyOptions_1">No</label>
</span>

When you say OnClick on the ListItem, .NET thinks you are referring to a Server-Side function you created called rblMyOptions_Click (which will do a post back), but since you want this to happen on the client, the strategy I suggested to solve it is to use JQuery to bind to the click event of each radio button, since the "radio button list" doesn't actually exist in the HTML.

当您在 ListItem 上说 OnClick 时，.NET 认为您指的是您创建的名为 rblMyOptions_Click 的服务器端函数（它将执行回发），但由于您希望这发生在客户端，因此我建议解决的策略它是使用 JQuery 绑定到每个单选按钮的点击事件，因为“单选按钮列表”实际上并不存在于 HTML 中。

You can see this question / answer for more info: ASP.NET radiobuttonlist onclientclick

您可以查看此问题/答案以获取更多信息： ASP.NET radiobuttonlist onclientclick

By using the JQuery to target any input[type='radio']we bind javascript to any radio button input (or we can be more restrictive as well).

通过使用 JQuery 来定位任何input[type='radio']我们将 javascript 绑定到任何单选按钮输入（或者我们也可以更加严格）。

回答by faby

it seems to be a know bug

这似乎是一个已知错误

refer this document(go to section "why attributes cannot be applied to listitems of a list control")

请参阅此文档（转到“为什么不能将属性应用于列表控件的列表项”部分）

the core should be in this code to fix the bug

核心应该在此代码中以修复错误

    public void RenderItem(System.Web.UI.WebControls.ListItemType itemType, 
                           int repeatIndex, RepeatInfo repeatInfo, 
                           HtmlTextWriter writer)
    {
        controlToRepeat.ID = repeatIndex.ToString(NumberFormatInfo.InvariantInfo);
        controlToRepeat.Text = this.Items[repeatIndex].Text;
        controlToRepeat.TextAlign = this.TextAlign;
        controlToRepeat.Checked = this.Items[repeatIndex].Selected;
        controlToRepeat.Enabled = this.Enabled; 

        controlToRepeat.Attributes.Clear();
        foreach (string key in Items[repeatIndex].Attributes.Keys)
            controlToRepeat.Attributes.Add(key, Items[repeatIndex].Attributes[key]);

        controlToRepeat.RenderControl(writer);

}