jQuery Function to get RadioButtonList Value

Question

I have the following HTML code:

<tr>
<td>
    <span>Random question here?</span>
</td>
<td>
    <asp:RadioButtonList ID="someList" runat="server" SelectedValue="<%# Bind('someValue') %>" RepeatDirection="Horizontal" CssClass="radioList">
        <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
        <asp:ListItem Text="No" Value="4"></asp:ListItem>
        <asp:ListItem Text="Don't Know" Value="2"></asp:ListItem>                                        
    </asp:RadioButtonList>
</td>
<td>
    <asp:TextBox ID="txtSomeValue" runat="server" Height="16px" CssClass="someScore" Enabled="false" Text="0"></asp:TextBox>
</td>
</tr>
<tr>
<td>
    <asp:TextBox ID="txtSomeTotal" runat="server" Height="16px" CssClass="someTotal" Enabled="false" Text="0"></asp:TextBox>
    <asp:Label ID="lblTFTotal" runat="server" Font-Bold="true" Font-Italic="true" Text="Your selected value is"></asp:Label>
</td>
</tr>

I need to write a jQuery function that populates the 'txtSomeValue' TextBox with the value selected from the RadioButtonList, and then calculates all the values selected (from about 10 of these RadioButtonLists) into the 'txtSomeTotal' TextBox.

I'm quite new to jQuery. Any help would be awesome.

Thanks

Answer 1

Your main issue is selecting the radio button as the radiobuttonlist id relates to a table wrapping your radio buttons. Once you've got that it's just a case of getting the fields you want to update. I would suggest assigning a class to the <tr> tag to make this a bit easier:

<tr class="mainRow">
<td>
    <span>Random question here?</span>
</td>
<td> ....

and then using something like this

    <script>
    $(document).ready(function () {
        $('.radioList input').click(function () {
            /* get the value of the radio button that's been clicked */
            var selectedValue = $(this).val();
            /* assign it to the nearest text box with a class of someScore */
            $(this).closest('.mainRow').find('.someScore').val(selectedValue);
            /* calculate the value of all the text boxes with a class of someScore */
            var currentTotal = 0;
            $('.someScore').each(function () {
                if (!isNaN($(this).val())) {
                    currentTotal += Number($(this).val());
                }
            });
            /* assign it to the text box that displays the total */
            $('#<%=txtSomeTotal.ClientID %>').val(currentTotal);
        });
    });
</script>