如何使用jQuery获取选定的单选按钮标签文本

Question

我在页面上有一个单选按钮

<div id="someId">
    <label class="radio-inline">
        <input name="x" type="radio" onchange="GetSelectedVal();">Yes</label>
    <label class="radio-inline">
        <input name="x" type="radio" onchange="GetSelectedVal();">No</label>
</div>

在页面加载时，我不想设置任何选择，因此不使用checked属性。 在我的JavaScript函数中，如何在运行时根据用户选择获取值Yes或No ？

function GetSelectedVal() {
    console.log($('#someId input:radio.........);
}

我看到过类似的问题，但无法找到此问题的解决方案。

Answer 1

从HTML删除onchange内联处理程序。 使用on绑定事件。

:checked将选择checked单选按钮。 closest将选择父label并且text()将获得与单选按钮关联的标签。 例如是

$('[name="x"]').on('change', function () {

    alert($('[name="x"]:checked').closest('label').text());

});

DEMO

Answer 2

您可以在onchange="GetSelectedVal();简单地传递this ，就像onchange="GetSelectedVal(this);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="someId"> <label class="radio-inline"><input name="x" type="radio" onchange="GetSelectedVal(this);">Yes</label> <label class="radio-inline"><input name="x" type="radio" onchange="GetSelectedVal(this);">No</label> </div> <script> function GetSelectedVal(ele) { alert($(ele).closest('label').text()); } </script> 

Answer 3

我会做的与接受的答案有些不同。

您可以在包含的div上创建一个，而不是在多个单选按钮上创建事件。 同样，让选中的单选按钮触发更改：

$('#someId').on('change', 'input[name="x"]:checked', function () {
    var label = $(this).siblings('span').text();
    console.log(label);
});

当我在其他元素旁边有文本时，我更喜欢将文本换成span：

<div id="someId">
    <label class="radio-inline"><input  name="x" type="radio"><span>Yes</span></label>
    <label class="radio-inline"><input  name="x" type="radio"><span>No</span></label>
</div>

演示： jsfiddle.net/qcxgwe66/