asp.net - 选择文本框后，如何选择单选按钮？

Question

我在TextBox旁边有一个RadioButton，当有人选择TextBox时，应将关联的RadioButton设置为Selected。

我一直在使用以下代码，直到发现它仅适用于Chrome:

<asp:RadioButton runat="server" GroupName="SomeGroup" ID="rbOption3" />
<asp:Label runat="server" AssociatedControlID="rbOption3">
    <asp:Label runat="server" Text="Pay other amount" />
    <asp:TextBox runat="server" ID="txtOtherAmount" CssClass="money-text" />
    <div class="align-with-radiobutton small-text">
        The minimum amount for web payments is <asp:Label runat="server" ID="lblMinPayment" />. If you are looking to pay a lower
        amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
    </div>
</asp:Label>

它在所有3种主要浏览器中的行为都不同

IE:当选择“文本框”时，选择内容完全不变

FireFox:更改 MouseUp，这意味着无论何时选择TextBox，焦点都将更改为RadioButton，这使得TextBox似乎不可选择

Chrome:可以正常工作，因为对 MouseDown所做的选择已更改

我的要求是用户可以选择“文本”或“文本框”的任何部分，并且它将选择“单选按钮”。

每当TextBox从鼠标或键盘导航获得焦点时，如何选择关联的RadioButton？

编辑

rsbarro发布的解决方案适用于IE和Chrome，但是对于FireFox仍然失败。当您在FireFox中选择TextBox时，RadioButton会将焦点移到MouseUp上，这使它看起来像无法选择TextBox。

我尝试使用一些jQuery，但是在选择TextBox时 .changed()和 .focus()不会被触发(尽管在选择Label时它们会被触发)，但我似乎无法停止该事件。

Answer 1

在最新版本的IE，Firefox和Chrome中，以下方法对我有效:

<script type="text/javascript">
    function selectRadio3() {
        var rb = document.getElementById('<%= rbOption3.ClientID %>');
        rb.checked = true;
    }

    function selectOtherAmount() {
        var txt = document.getElementById('<%= txtOtherAmount.ClientID %>');
        txt.focus();
    }
</script>

<asp:RadioButton runat="server" GroupName="SomeGroup" ID="rbOption3" onclick="javascript:selectOtherAmount()" />
<asp:Label ID="Label1" runat="server" AssociatedControlID="txtOtherAmount" Text="Pay other amount" />
<asp:TextBox runat="server" ID="txtOtherAmount" onfocus="javascript:selectRadio3()" CssClass="money-text" />
<div class="align-with-radiobutton small-text" onclick="javascript:selectOtherAmount()">
    The minimum amount for web payments is <asp:Label runat="server" ID="lblMinPayment" />. If you are looking to pay a lower
    amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
</div>

我将 Label与 TextBox关联，并添加了JavaScript以在 checked成为焦点时设置 RadioButton的 TextBox属性。我还在 onclick上添加了 RadioButton事件，将焦点设置为 TextBox。

编辑
使用您的原始HTML并添加一些JavaScript也对我有效。我在 onclick中添加了 RadioButton事件以将焦点设置为 TextBox，在 onfocus上添加了 TextBox事件以设置 checked的 RadioButton属性。

<script type="text/javascript">
    function selectRadio3() {
        var rb = document.getElementById('<%= rbOption3.ClientID %>');
        rb.checked = true;
    }

    function selectOtherAmount() {
        var txt = document.getElementById('<%= txtOtherAmount.ClientID %>');
        txt.focus();
    }
</script>

<asp:RadioButton runat="server" GroupName="SomeGroup" ID="rbOption3" onclick="javascript:selectOtherAmount();" />
<asp:Label ID="Label1" runat="server" AssociatedControlID="rbOption3">
    <asp:Label ID="Label2" runat="server" Text="Pay other amount" />
    <asp:TextBox runat="server" ID="txtOtherAmount" CssClass="money-text" onfocus="javascript:selectRadio3();" />
    <div class="align-with-radiobutton small-text">
        The minimum amount for web payments is <asp:Label runat="server" ID="lblMinPayment" />. If you are looking to pay a lower
        amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
    </div>
</asp:Label>