ASP.NET RadioButtonList Jquery Onchange event

Question

I have an asp.net RadioButtonList with 3 items in it. When the user clicks on any of the items I wish to fire off my JQuery and get the value of which radio button was selected and I will use that value to determine hiding/showing a <div>.

Here is what my RadioButtonList looks like:

asp:RadioButtonList ID="rblAnswers" runat="server"
                RepeatDirection="Horizontal"
                CssClass="form-control FormatRadioButtonList"
                RepeatLayout="Table">
                <asp:ListItem>Yes</asp:ListItem>
                <asp:ListItem>No</asp:ListItem>
                <asp:ListItem>Maybe</asp:ListItem>
            </asp:RadioButtonList>

And here is my JQuery event:

$(document).ready(function () {
    $('#<%=rblAnswers.ClientID %>').change(function () {
        $(this).click(function () {
            alert((this).value);
        });
    });
});

However it doesn't seem to work, I have even tried just displaying an alert message to see if I could get my Jquery to hit (I have other Jquery working elsewhere so I know for a fact it is linked into my project correctly.)

$('#<%=rblAnswers.ClientID %>').change(function () {
    alert("TEST");
});

Where am I going wrong? How can I use a Jquery change event on my radiobuttonlist to get the value of the selected radio button?

Edit

This is how it is being rendered in html

<table id="ctl00_ContentPlaceHolder2_rblAnswers" class="form-control FormatRadioButtonList">
<tbody>
    <tr>
        <td>
            <input id="ctl00_ContentPlaceHolder2_rblAnswers_0" type="radio" name="ctl00$ContentPlaceHolder2$rblRework" value="Yes">
            <label for="ctl00_ContentPlaceHolder2_rblAnswers_0">Yes</label>
        </td>
        <td>
            <input id="ctl00_ContentPlaceHolder2_rblAnswers_1" type="radio" name="ctl00$ContentPlaceHolder2$rblAnswers" value="No">
            <label for="ctl00_ContentPlaceHolder2_rblAnswers_1">No</label>
        </td>
        <td>
            <input id="ctl00_ContentPlaceHolder2_rblAnswers_2" type="radio" name="ctl00$ContentPlaceHolder2$rblAnswers" value="Maybe">
            <label for="ctl00_ContentPlaceHolder2_rblAnswers_2">Maybe</label>
        </td>
    </tr>
</tbody>

Answer 1

The RadioButtonList control renders, by default, a table element with the ID you specify on the control. Within this table are your radio buttons.

For example, this is how your control will render:

<table id="rblAnswers" class="form-control FormatRadioButtonList">
  <tbody>
    <tr>
      <td>
        <input id="rblAnswers_0" type="radio" name="rblAnswers" value="Yes">
        <label for="rblAnswers_0">Yes</label>
      </td>
      <td>
        <input id="rblAnswers_1" type="radio" name="rblAnswers" value="No">
        <label for="rblAnswers_1">No</label>
      </td>
      <td>
        <input id="rblAnswers_2" type="radio" name="rblAnswers" value="Maybe">
        <label for="rblAnswers_2">Maybe</label>
      </td>
    </tr>
  </tbody>
</table>

This means that your inputs are descendants of the element with ID rblAnswers. So to target the radio button inputs with jQuery you would use:

$('#<%=rblAnswers.ClientID %> input').change(function () {
    alert($(this).value);
});