jquery 获取单选按钮选择

Question

我正在学习 jquery，但似乎无法从 asp.net 单选按钮列表中的单选按钮列表中找到所需的单选按钮的值。

这是标记；

 <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>

我尝试了各种方法，都没有奏效。这是最新的变化，只是提醒我选择了什么。

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

这里是渲染的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

可能的解决方案是

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

或稍长但相同，应该也可以工作

$('input[type=radio]').filter(':checked').val();

只要你想得到它就可以了

Answer 2

如果你的radio 按钮有value 像这样

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

那么你可以试试这个来获取rdo-1

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

Example.

否则，如果你的radio按钮是这样的，没有值属性

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

然后我认为您不需要上面的代码，因为在命名组中只能选择一个 radio 按钮，它的值可以是 on 或 off，在这种情况下，处理程序内的 $(this) 是总是checked 一个，它的值将是on。

Example.

或者，如果您需要在 change 处理程序之外获取您的 radio 按钮的选中值，那么您可以使用它

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

Example.

P/S：如果你现在还有疑惑，那么我建议你把浏览器渲染的源代码贴出来。

Answer 3

$(document).ready(function () {    
    $('#MainContent_rblAddEditContact input[type=radio]').change(function(){
      alert( $(this).val() );
    });
});

现场演示：http://codepen.io/joe/pen/DJleG