Loading ...

jQuery: Which radiobutton group is not selected | CodeAsp.Net

jQuery: Which radiobutton group is not selected

 /5
0 (0votes)

In this blog I will show how to get which RadioButton Group is not selected on the page with jQuery. User will click a button and the radio button groups which are not selected will be highlighted to let the user know about the radiobutton groups which he missed. So this will let the user to validate radiobutton group with jQuery. Below is the sample code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:RadioButton ID="RadioButton1" Text="RadioButton1" runat="server" GroupName="Group1" />
    <asp:RadioButton ID="RadioButton2" Text="RadioButton2" runat="server" GroupName="Group1" />
    <br />
    <asp:RadioButton ID="RadioButton3" Text="RadioButton3" runat="server" GroupName="Group2" />
    <asp:RadioButton ID="RadioButton4" Text="RadioButton4" runat="server" GroupName="Group2" />
    <br />
    <asp:RadioButton ID="RadioButton5" Text="RadioButton5" runat="server" GroupName="Group3" />
    <asp:RadioButton ID="RadioButton6" Text="RadioButton6" runat="server" GroupName="Group3" />
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>

    <script type="text/javascript">

        $("#<%= Button1.ClientID %>").click(function() {

            var groups = {}

            $(":radio").each(function() {
                groups[this.name] = true;
            });

            for (group in groups) {
                var radioButttons = $(":radio[name=" + group + "]:checked");
                isChecked = !!radioButttons.length;
                if (!isChecked) {
                    $(":radio[name=" + group + "]").next("label").css("background-color", "yellow");
                }
                else {
                    $(":radio[name=" + group + "]").next("label").css("background-color", "white");
                }
            }
            return false;
        });


    </script>

</body>
</html>

 


Hope this helps!

Comments (no comments yet)

Top Posts