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

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

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

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

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

});

DEMO

Answer 2

您可以像this

那样在onchange="GetSelectedVal();中简单地传递onchange="GetSelectedVal(this);

＆＃13;

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

＆＃13;

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/

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

3 个答案: