locked
how to set focus on 2 checkboxes RRS feed

  • Question

  • User-944424728 posted

    Hello, I have 2 checkbox- id is program_0 and program_1. when I select the 2nd check box, the focus jump to the 1st check box. how do I set focus where I check the box? I tried this script " ScriptManager.RegisterStartupScript(Me, Me.GetType, "rblAvailableTriggerFocus",
    String.Format("$('#{0}_{1}').focus();", rblAvailable.ClientID, rblAvailable.SelectedIndex),
    True)" but it did not work. This function works Protected Sub rblAvailable_SelectedIndexChanged but the program function is not.

    ScriptManager.RegisterStartupScript(Me, Me.GetType, "chkProgramsTriggerFocus",
    String.Format("$('#{0}_{1}').focus();", chkPrograms.ClientID, chkPrograms.SelectedIndex),
    True)

    Protected Sub chkPrograms_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

    Dim chk As CheckBoxList = sender
    Dim ucVerificationSummaryAll As UserControlVerificationSummaryAll = phVerificationSummary.FindControl("ucVerificationSummaryAll")

    For Each item As ListItem In chk.Items
    With ucVerificationSummaryAll
    .ToggleShowHideProgram(item.Value, item.Selected)

    End With
    Next

    ScriptManager.RegisterStartupScript(Me, Me.GetType, "chkProgramsTriggerFocus",
    String.Format("$('#{0}_{1}').focus();", chkPrograms.ClientID, chkPrograms.SelectedIndex),
    True)
    End Sub

    Protected Sub rblAvailable_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rblAvailable.SelectedIndexChanged

    If _intProgramID > 0 And _intAppID > 0 Then
    Dim ucVerificationSummary As UserControlVerificationSummary = phVerificationSummary.FindControl("ucVerificationSummary")
    With ucVerificationSummary
    .ToggleVerifications(Me.rblAvailable.SelectedValue)

    End With
    Else
    Dim ucVerificationSummaryAll As UserControlVerificationSummaryAll = phVerificationSummary.FindControl("ucVerificationSummaryAll")
    With ucVerificationSummaryAll
    .ToggleVerifications(Me.rblAvailable.SelectedValue)

    End With
    End If
    ScriptManager.RegisterStartupScript(Me, Me.GetType, "rblAvailableTriggerFocus",
    String.Format("$('#{0}_{1}').focus();", rblAvailable.ClientID, rblAvailable.SelectedIndex),
    True)
    End Sub

    focus jump to the first check box when 2nd checkbox was selected.

    Wednesday, May 15, 2019 12:32 AM

All replies

  • User665608656 posted

    Hi aspvbnet,

    According to your question, I did an example by using jquery.
    It should be noted that setting the focus behavior needs to be executed after the click event has been confirmed.
    So you need to add a HiddenField to store the value of the current click checkbox, and then loop the CheckBoxList control to determine whether the value of the HiddenField is consistent with the currently selected checkbox value. If it is consistent, you can focus on another checkbox.

    For more details, please refer the following code:

    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#CheckBoxList1 input[type="checkbox"]').click(function () {
                    $("#HiddenField1").val($(this).val());
                });
            })
            $(document).ready(function () {
                $('#CheckBoxList1 input[type="checkbox"]').each(function () {
                    if ($(this).is(':checked') && ($(this).val() == $("#HiddenField1").val())) {
                     $(this).parent().parent().siblings().children().children().eq(0).focus();//get another checkbox then focus it
    
                    }
    
                });
    
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:HiddenField ID="HiddenField1" runat="server" />
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true">
                    <asp:ListItem>SelectA</asp:ListItem>
                   <asp:ListItem>SelectB</asp:ListItem>
                </asp:CheckBoxList>
            </div>
        </form>
    </body>

    The result of my work demo: 

     

     

    Best Regards,

    YongQing.

    Wednesday, May 15, 2019 9:18 AM