locked
Setting a radio button to checked RRS feed

  • Question

  • User1453549677 posted

    When I tab out of the rbCompareTo1 radio button, I want to check rbCompareTo2 and set focus to it. Can you help?

    <script type="text/javascript">
            $(document).ready(function () {
    
                if ($('#rbCompareTo1').focusout()) {
                    alert('hello');
                    $('#rbCompareTo2').prop('checked', true);
                }
            });
    
    </script>
    
    <asp:RadioButton ID="rbCompareTo1" runat="server" AutoPostback="True" Text="Pending Records" OnCheckedChanged="rbComparePendingCheckChanged"/>
    <asp:RadioButton ID="rbCompareTo2" runat="server" AutoPostback="True" Text="Active Records" OnCheckedChanged="rbCompareActiveCheckChanged"/>



    Tuesday, April 26, 2016 7:25 PM

Answers

  • User281315223 posted

    Generally, when ASP.NET renders Controls, it can sometimes name them a bit differently than you might expect. This usually results on any parent container names being appended onto the actual controls themselves.

    You can use jQuery's "ends-with" selector to handle this :

    $(function () {
            // When focus is lost on your first checkbox (the blur event will be called)
            $('[id$="rbCompareTo1"]').blur(function(){
                  // Trigger the following
                  alert('hello');
                  $('[id$="rbCompareTo1"]').prop('checked', true);
            });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 26, 2016 8:56 PM
  • User61956409 posted

    Hi drl,

    When I tab out of the rbCompareTo1 radio button, I want to check rbCompareTo2 and set focus to it. Can you help?

    You could refer to the following sample code to modify your code.

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RadioButton ID="rbCompareTo1" runat="server" Text="Pending Records" />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:RadioButton ID="rbCompareTo2" runat="server" Text="Active Records" />
    
    <script>
        $(function () {
            $("#rbCompareTo1").focusout(function () {
                $("#rbCompareTo2").attr("checked", "checked");
                $("#rbCompareTo2").focus();
            })
        })
    </script>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 27, 2016 2:29 AM

All replies

  • User281315223 posted

    Generally, when ASP.NET renders Controls, it can sometimes name them a bit differently than you might expect. This usually results on any parent container names being appended onto the actual controls themselves.

    You can use jQuery's "ends-with" selector to handle this :

    $(function () {
            // When focus is lost on your first checkbox (the blur event will be called)
            $('[id$="rbCompareTo1"]').blur(function(){
                  // Trigger the following
                  alert('hello');
                  $('[id$="rbCompareTo1"]').prop('checked', true);
            });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 26, 2016 8:56 PM
  • User61956409 posted

    Hi drl,

    When I tab out of the rbCompareTo1 radio button, I want to check rbCompareTo2 and set focus to it. Can you help?

    You could refer to the following sample code to modify your code.

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RadioButton ID="rbCompareTo1" runat="server" Text="Pending Records" />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:RadioButton ID="rbCompareTo2" runat="server" Text="Active Records" />
    
    <script>
        $(function () {
            $("#rbCompareTo1").focusout(function () {
                $("#rbCompareTo2").attr("checked", "checked");
                $("#rbCompareTo2").focus();
            })
        })
    </script>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 27, 2016 2:29 AM
  • User-474980206 posted

    because you have autopostback set, you are doing a form post on the change event, which will re-render the page, and set focus to the post back control. as you are doing a server post with on change, you should move the logic to the server.

    Wednesday, April 27, 2016 3:04 PM
  • User1453549677 posted

    Thanks Rion.

    Wednesday, April 27, 2016 5:30 PM
  • User1453549677 posted

    Thanks Rion for your reply, I decided to open a new thread because my requirement changed.

    Thursday, April 28, 2016 4:42 PM