CODEWITHSUNDEEP
jqueryasp.net
BRBT
BRBT

Reputation: 1487

ASP.NET RadioButtonList Jquery Onchange event

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>

Upvotes: 4

Views: 15141

Answers (3)

Pranesh Janarthanan
Pranesh Janarthanan

Reputation: 1194

Tested and working code

$("[id*=rblAnswers] input").on("click", function () {
        var selectedValue = $(this).val();
        var selectedText = $(this).next().html();
        alert("Selected Text: " + selectedText + " Selected Value: " + selectedValue);
    });

Referred: jqueryfaqs

Upvotes: 0

Turnip
Turnip

Reputation: 36732

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);
});

Upvotes: 4

fdfey
fdfey

Reputation: 587

Use onclick on <asp:ListItem>

            <asp:RadioButtonList ID="rblAnswers" runat="server"
                RepeatDirection="Horizontal"
                CssClass="form-control FormatRadioButtonList"
                RepeatLayout="Table">
                   <asp:ListItem  Value="y" onclick="alert(this.value)" Text="Yes"></asp:ListItem>
                   <asp:ListItem Text="No"></asp:ListItem>
            </asp:RadioButtonList>

Upvotes: 0

Related Questions