locked
uncheck radiobutton onclick event using javascript RRS feed

  • Question

  • User1623409651 posted


    I have following radiobuttons
    <asp:RadioButton ID="radV" runat="server" Text="V" GroupName="VS" />
    <asp:RadioButton ID="radS" runat="server" Text="S" GroupName="VS" />

    They work fine when I select on, other gets deselected.

    What I want is that if someone clicks again on the selected one then it should deselect that one (nothing should be selected)

    Thanks

    Tuesday, November 20, 2018 8:50 AM

Answers

  • User1623409651 posted

    Got the solution may be it helps some one else

    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
        <script type ="text/javascript">
            $(document).ready(function () {
                $("input:radio:checked").data("chk", true);
                $("input:radio").click(function () {
                    $("input[name='" + $(this).attr("name") + "']:radio").not(this).removeData("chk");
                    $(this).data("chk", !$(this).data("chk"));
                    $(this).prop("checked", $(this).data("chk"));                
                });
            });
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 10:13 AM
  • User61956409 posted

    Hi Rameezwaheed,

    What I want is that if someone clicks again on the selected one then it should deselect that one (nothing should be selected)

    Glad to hear you achieve the requirement by yourself, and thanks for sharing the sample code.

    To achieve the requirement, we can also use the following code snippet.

    $(function () {
        $("input[name='VS']").click(function () {
            if ($(this).data('ischecked') == true) {
                $(this).prop('checked', false);
                $(this).data('ischecked', false);
            }
            else {
                $(this).data('ischecked', true);
            }
    
            $(this).siblings('input[name="VS"]').prop('checked', false);
        })
    })

    Note: you can mark the reply with working sample as answer, which would help other community members quickly find this thread and answer to solve similar problem.

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 21, 2018 2:34 AM

All replies

  • User1623409651 posted

    Got the solution may be it helps some one else

    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
        <script type ="text/javascript">
            $(document).ready(function () {
                $("input:radio:checked").data("chk", true);
                $("input:radio").click(function () {
                    $("input[name='" + $(this).attr("name") + "']:radio").not(this).removeData("chk");
                    $(this).data("chk", !$(this).data("chk"));
                    $(this).prop("checked", $(this).data("chk"));                
                });
            });
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 10:13 AM
  • User61956409 posted

    Hi Rameezwaheed,

    What I want is that if someone clicks again on the selected one then it should deselect that one (nothing should be selected)

    Glad to hear you achieve the requirement by yourself, and thanks for sharing the sample code.

    To achieve the requirement, we can also use the following code snippet.

    $(function () {
        $("input[name='VS']").click(function () {
            if ($(this).data('ischecked') == true) {
                $(this).prop('checked', false);
                $(this).data('ischecked', false);
            }
            else {
                $(this).data('ischecked', true);
            }
    
            $(this).siblings('input[name="VS"]').prop('checked', false);
        })
    })

    Note: you can mark the reply with working sample as answer, which would help other community members quickly find this thread and answer to solve similar problem.

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 21, 2018 2:34 AM
  • User1623409651 posted

    Thanks Fei Han,

    Simple and easy. 

    Regards,

    Thursday, November 22, 2018 4:55 AM