jquery - 查找所选单选按钮的文本

Question

这是我动态生成的 html 单选按钮列表

<label class="radio" for="10013"><input type="radio" name="himg" value="10013">Amr1a</label> 

<label class="radio" for="10014"><input type="radio" name="himg" value="10014"> Amr2a</label>

想要选择单击（选中）单选按钮的文本

这就是我尝试过的（jquery-1.9.1）

$(document.body).on('click', 'input:radio[name="himg"]', function () {
                alert($(this).next().text());

            });

但它什么也没返回。

Answer 1

改变：

alert($(this).next().text());

到：

alert($(this).parent().text());

jsFiddle 示例

您正在单击单选按钮元素，然后尝试使用.next()which 查找下一个不存在的元素，只有一个文本节点。通过使用.parent()，您可以获取标签内的文本（不包括收音机的 HTML）。

Answer 2

您不需要body并且next()...next()搜索下一个 DOM 元素，但在您的情况下是 text..so 使用 parent() 和text()

试试这个

$(document).on('click', 'input:radio[name="himg"]', function () {
            alert($(this).parent().text());

        });

Answer 3

试试这个：

$(document).on('click', 'input:radio[name="himg"]', function () {
    alert($(this).parent().text());
});

实际上，label这里是所选单选按钮的父级，而不是紧随其后的兄弟级。所以，我们需要使用parent()来获取标签元素，然后是文本。

Answer 4

通过label-for 提供无线电 id 并将其与具有for属性的标签相关联来使用。

参考标签使用

演示

html

<input type="radio" id="radio1" name="himg" value="10013" />
<label class="radio" for="radio1">Amr1a</label>
<input type="radio" id="radio2" name="himg" value="10014" />
<label class="radio" for="radio2">Amr2a</label>

JS

$(document.body).on('click', 'input:radio[name="himg"]', function () {

    alert($('label[for=' + this.id + ']').text()); // Ids are going to be unique so yuo can directly select it with label for.

});

Answer 5

在您的代码中稍作调整，以下应该可以工作：

   $(document.body).on('click', 'input:radio[name="himg"]', function () {
      alert($(this).closest('label').text());
    });