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 a TextBox 'txtSomeValue' with a value selected from the RadioButtonList list, and then computes all the selected values ​​(from about 10 of these RadioButtonLists lists) into the 'txtSomeTotal' text box.

I am new to jQuery. Any help would be awesome.

thanks

Answer 1

The main problem is that you select the radio button, as the radioobuttonlist identifier refers to the table that wraps your radio buttons. Once you succeed, this is just a case of getting the fields that you want to update. I would suggest assigning a <tr> class to make this a little 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 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> 

Answer 2

Ivan almost understood, but faster. Use jQuery to select RBL, then filter the selected input:

 $("#<%# rbRadioButtonListId.ClientID %> input:radio:checked").val(); 

No need to catch tables or switch names.

Answer 3

All radio buttons in your list should display with the same name attribute. Look at this and use it as a selector in a script. Something like this should work:

 $('input:radio[name=NameOfRadioButtons]:checked').val(); 

Answer 4

To populate a text field with jQuery, you must use the val () function.

 $("#ID").val("Text to put in the textbox"). 

Since ASP.NET changes the identifier of .net objects, you will need to do this:

 $("#<%= txtSomeValue.ClientID %>").val("Text to put in the textbox"). 

is that enough?

Answer 5

I used:

 $('#<%= rbRadioButtonListId.ClientID %>').children().children().children().find("input:checked").val(); 

Too many "child" selectors, due to the html generated to represent the radioobuttonlist (table> tbody> tr> td>).

Hope this answer helps someone else who couldn’t find a suitable solution to their problem.

Answer 6

  <asp:RadioButtonList ID="rblRequestType"> <asp:ListItem Selected="True" Value="value1">Value1</asp:ListItem> <asp:ListItem Value="Value2">Value2</asp:ListItem> </asp:RadioButtonList> 

You can get a list, for example:

 var radio0 = $("#rblRequestType_0"); var radio1 = $("#rblRequestType_1"); if (radio0.checked){ // do something } if (radio1.checked){ // do something }