Question

I am learning jquery and can’t seem to find what I need to get the value of the selected radio button from a radio button list in asp.net radiobuttonlist.

Here is the markup;

 <fieldset style="width:50%;">
        <legend>Select one option below</legend>
        <div id="radioContactTasks">
            <asp:RadioButtonList ID="rblAddEditContact" runat="server"
                         RepeatDirection="Vertical" 
                         CssClass="registerradio" TextAlign="Left">
                <asp:ListItem Text="Add New Contact" />
                <asp:ListItem Text="Edit Existing Contact" />
                <asp:ListItem Text="Delete Existing Contact" />
            </asp:RadioButtonList>
        </div>
    </fieldset>

I’ve tried various methods, none work. Here is the latest variation to just alert me what was selected.

$(document).ready(function () {
        $("#rblAddEditContact").on("change", ":radio", function () {
            alert($(this).siblings("label").value);
        });
    });

Here is the rendered html

<fieldset style="width:45%;">
    <legend>Add New or Edit Exisiting Contacts</legend>
    <fieldset style="width:50%;">
        <legend>Select one option below</legend>
        <div id="radioContactTasks">
            <table id="MainContent_rblAddEditContact" class="registerradio">
<tr>
    <td><label for="MainContent_rblAddEditContact_0">Add New Contact</label><input id="MainContent_rblAddEditContact_0" type="radio" name="ctl00$MainContent$rblAddEditContact" value="Add New Contact" /></td>
</tr><tr>
    <td><label for="MainContent_rblAddEditContact_1">Edit Existing Contact</label><input id="MainContent_rblAddEditContact_1" type="radio" name="ctl00$MainContent$rblAddEditContact" value="Edit Existing Contact" /></td>
</tr><tr>
    <td><label for="MainContent_rblAddEditContact_2">Delete Existing Contact</label><input id="MainContent_rblAddEditContact_2" type="radio" name="ctl00$MainContent$rblAddEditContact" value="Delete Existing Contact" /></td>
</tr>

Answer 1

If your radio buttons have value like this

<input type="radio" value="rdo-1" name="radio1" />

then you may try this to get the rdo-1

$("#radioContactTasks [type='radio']").on("change", function () {
    alert($(this).val()); // rdo-1
});

Example.

Otherwise, if your radio buttons are like this, without a value attribute

<input type="radio" name="radio1" />

then I think you don’t need above code because only one radio button can be selected in a named group and it’s value could be on or off and in this case $(this) inside the handler is always the checked one and it’s value will be on.

Example.

Alternatively, if you need to get the checked value of your radio button outside of the change handdler then you can use this

$("#radioContactTasks input[type='radio']:checked").val();

Example.

P/S: If still now you have confusions then I suggest you to post the source code rendered by the browser.