RadioButton has value Although it has not selected

Question

Hi experts please see this code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <table border="1" cellpadding="8" cellspacing="0" width="700px" style="background-color: Aqua">
            <tr>
                <td style="direction: rtl">
                    &nbsp;
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td style="direction: ltr">
                   F1                    </td>
            </tr>
            <tr>
                <td style="direction: rtl">
                    <asp:DropDownList ID="Drp_1" runat="server" ClientIDMode="Static">
                        <asp:ListItem Value="1">Head of household</asp:ListItem>
                        <asp:ListItem Value="2">Spouse</asp:ListItem>
                        <asp:ListItem Value="3">Child</asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    F2
                </td>
            </tr>
            <tr>
                <td style="direction: rtl">
                    <asp:RadioButtonList ID="Rad_7" runat="server" ClientIDMode="Static">
                        <asp:ListItem Text="1" Value="1"></asp:ListItem>
                        <asp:ListItem Text="2" Value="2"></asp:ListItem>
                        <asp:ListItem Text="3" Value="3"></asp:ListItem>
                        <asp:ListItem Text="4" Value="4"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
                <td>
                    F3
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button ID="btn" runat="server" Height="44px" Text="Submit" ClientIDMode="Static"
                        Width="207px" />
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <h1 style="color: Green">
            Progress ...
        </h1>
    </ProgressTemplate>
</asp:UpdateProgress>

and I use this jQuery code :

    <script type="text/javascript">

    function pageLoad() {
        $(document).ready(function () {
            $("#Drp_1").on("change", function () {
                if ($(this).val() != null && $(this).val() == 2) {   //<<<<< This Line
                    if ($('#Rad_7 input').val() != null && $('#Rad_7 input').val() > 1 && $('#Rad_7 input').val() != 2) {
                        alert('Wrong option');
                    }
                }
            }).change();
        });
    }
</script>

the problem is when I use break point in specified script line and when I use immediate window this code $('#Rad_7 input').val() it return 1 altough I don't select any option in Rad_7. where is my mistake?

thanks

Answer 1

$('#Rad_7 input').val() will get the first radio button's value no matter if it is checked or not. Since the value of first radio button is 1 you are seeing the same.

To get the checked radio buttons value use this.

$('#Rad_7 input:checked').val();

If none of the radio button in a group is checked then it will give undefined.