How to set the radio button selected value using jQuery in RadioButtonList?

You want to set the radio button selected value of RadioButtonList using jQuery. Before discussing on how to achieve the same, we would see some of the facts about RadioButtonList.

In a typical usage of getting gender information from the user, you would use RadioButtonList like below in your aspx page.

<asp:RadioButtonList ID="rblSex" runat="server">

   <asp:ListItem Text="Male" Value="Male"></asp:ListItem>

   <asp:ListItem Text="Female" Value="Female"></asp:ListItem>

</asp:RadioButtonList>

Above ASP.Net RadioButtonList Server control, would generate the following HTML when being sent to the browser. Always remember that browsers could understand HTML, CSS and Javascript. They could not understand ASP.Net. Please read this article to understand the basics.

<table id="rblSex">
  <tr>
    <td>
       <input id="rblSex_0" type="radio" name="rblSex" value="Male" />
       <label for="rblSex_0">Male</label>
    </td>
  </tr>
  <tr>
    <td>
        <input id="rblSex_1" type="radio" name="rblSex" value="Female" />
        <label for="rblSex_1">Female</label>
    </td>
  </tr>
</table>

In the above generated HTML, all the radio buttons would have the same name (rblSex in our case). This name value is got from the ID attribute of asp:RadioButtonList Server control.

You might want to set the selected value of radio button on a click of button (as shown in below picture).

To set the selected value, we need to set the checked property of the radio button to true (boolean value)

function SelectRadioButton(name, value) {

  $("input[name='"+name+"'][value='"+value+"']").prop('checked', true);

  return false; // Returning false would not submit the form

}

Above function SelectRadioButton has following  input parameters

name –representing the radio button group name(rblSex in our case)

value – function will set the radiobutton selected value based on this value.

We are using jQuery selector to select the radio button with a particular value and set the checked property to true.

You can call this function on click event by passing the required values. In ‘Select Male’ button, we are passing the rblSex as radio button group name and Male as value.

<asp:Button ID="btnSelectMale" runat="server" OnClientClick="return SelectRadioButton('rblSex','Male');" Text="Select Male" />

<asp:Button ID="btnSelectFemale" runat="server" OnClientClick="return SelectRadioButton('rblSex','Female');" Text="Select Female" />

Potential Pitfalls:

There are few potential pitfalls that need to be considered.

   1. Difference between checked attribute and checked property:

Checked attribute, corresponds to the defaultChecked property, tells you whether the element is checked when the page is loaded for the first time.

So if you set the checked attribute, the element will be checked only for the first time. You would not be able to change the selected value of radio button from second time onwards, if you use the checked attribute.

   2. Missing enclosing quotes in name or value in jQuery selector:

In the below jquery selector, if you miss the quotes(single quote used below) enclosing name or value, jquery selector would not be able to select the elements who value contain spaces.

$("input[name='"+name+"'][value='"+value+"']").prop('checked', true);

If you use the below code, instead of above code  -you would not be able to select the value with spaces. For example, by using the below code, you would not be able to select radio buttons with values like ‘US Citizen’ or ‘Not a US Citizen’.

$("input[name="+name+"][value="+value+"]").prop('checked', true);

Summary:

To process the elements using javascript/jQuery, first you need to select the elements. Then, you need to process those elements.  To set the selected value of radio button, first we need to select and then set the checked property to true.

Now, you need to do one thing to understand this example better.

You need to code.  Yes, you need to code.

Just fire up your visual studio and code those couple of lines.

You’ll learn better, if you code every time you learn something new.

Thanks for reading the article. If you like this article, please subscribe in the below form.