jQuery Changing Label Text on Radio Button List Click

In this tutorial, we are going to understand a simple event binding in jQuery on a Radio Button List item. Also we will see how a Radio Button List is rendered in the final HTML version at the browser end.

A Radio Button List is rendered into a table and inside td elements input & label elements are created. Input elements are of type of "radio" and have the additional attribute name "name". This "name" attribute holds the ID we assigned in the aspx version. It is noted that the ID of each input element is suffixed with _n. Here n is the index number starting with 0.

To understand the same, we will create a simple web page.  In this web page we are going to put two web controls, a radio button list for Gender category (on which we will bind the "change" event) and a Label (to show salutation for the selected gender).

Let's see it in action. I have a simple aspx version of my code for a Radio Button List as below:

<asp:RadioButtonList ID="rblGender" runat="server">
                      <asp:ListItem Value="Male" Text="Male"></asp:ListItem>
                      <asp:ListItem Value="Female" Text="Female"></asp:ListItem>
                      <asp:ListItem Value="Other" Text="Other"></asp:ListItem>
</asp:RadioButtonList>

And this Radio Button List is rendered in the final HTML version as below.

(This can be seen in Developer tools of IE, Code Inpector of Chrome or Firebug in the case of the Firefox browser.)

Here you can see that a Table element has been created with the ID of our Radio button list, for example <table id="rblGender">. We have three radio options and so there are 3 rows. Our option text is assigned to Labels and the basic HTML version of the radio element, for example <input type="radio"> has been generated. Here the important thing to be noted is that the "name" attribute has been added to each radio input type element. 

So we will use this automatically created/added attribute "name" for binding the change() event. We can use any selector for binding events in jQuery, like ID, name, type, class name etc. In fact jQuery traverses the DOM to determine the specified selector and then bind the event.

Here is the jQuery code to bind the change event of our Radio Button List:

We are using the latest version, jQuery 1.8.2 here but the .change() method is available since the initial version of jQuery i.e. jQuery version 1.0. So it works fine with earlier versions also. 

The following is our aspx code:

After running we see it in action as in the following.

1. For the very first time without any selection of a radio button:

2. For the second time when we click on "Male":



3. For the third time when we click on "Female":

And so for the third option, the salutation is changed. It shows the salutation according to our selected Gender.

Conclusion

Though this tutorial covers a very basic level of binding an event method in jQuery. The notable points are - 

• It's rendered differently than what we have written in the aspx code

• The change of the IDs of the radio buttons

You can download complete code for this simple example. 

Thanks.