获取所选单选按钮的标签文本

Question

我正在尝试获取属于checked单选按钮的标签的文本，但似乎并不太能成功。

$(document).ready(function(){
  $("body").on("click", "#btn", function(){

    var radios = $("input[type='radio']");

    $.each(radios, function(index, element){
      if ($(this).prop("checked") === true){

        var radioID = element.id;
        $("label").each(function(ind, elm){

          if ($(elm).prop("for") == radioID){
            console.log($(elm)); 
          }

        });
      }
    });
  });
});

jsbin

不知道为什么它只在控制台中打印出来：

-- [11:07:13.834] ({0:({}), context:({}), length:1}) @ http://jsbin.com/uniwum/2/edit:71

我做错了什么？

- 1252748

Answer 1

按照以下方式进行：

$('#btn').click(function() {
    $("input[type='radio']:checked").each(function() {
        var idVal = $(this).attr("id");
        alert($("label[for='"+idVal+"']").text());
    });
});

请参考 在线演示

更新：

以下是文档参考：

• 选择器类别
• 属性等于选择器 [name="value"]

- Siva Charan

---

太酷了。在jQuery选择器的括号中，确切可以放什么东西的文档在哪里？例如：input[type='text'] label[for='something'等等。看起来非常方便。谢谢！ - 1252748

感谢提供文档。我认为这是一个很好的解决方案。 - 1252748

Answer 2

试试这个：

$('#btn').click(function(){
    $('table input[type="radio"]').each(function(){
        if($(this).is(':checked')){
        console.log($(this).parent().next().find('label').text());
        }
    });
});

jsFiddle示例

更新：由于它们是单选按钮，更快的方法是：

$('#btn').click(function(){
    console.log( $('table input[type="radio"]:checked').parent().next().find('label').text() );
});

jsFiddle example

- j08691

---

在你的方法中，看起来你只是忘记调用.text()了。例如：$(elm).text()。 - j08691

是的，我知道。我只是试图在执行 text() 前将该元素本身打印到日志中。我只是想知道为什么它只打印了 [11:07:13.834] ({0:({}), context:({}), length:1}) 而不是显示一个 jQuery 对象。 - 1252748

Answer 3

$("input[type='radio']:checked").parent().text()

- Melu

---

如果您有多个单选按钮，则此答案不仅可以获取所选单选按钮的值。 - Ariel Antonio Fundora

Answer 4

您可以根据单选按钮的HTML编写和单选按钮的文本以多种方式完成此操作，我将介绍两种非常简单的方法。

方法1： 将自定义数据属性分配给单选按钮，并使用要显示的相同文本。

    <input id="radio4" name="radios1" type="radio" value="4" data-value="radio 4" /> radio 4
    <input id="radio5" name="radios1" type="radio" value="4" data-value="radio 5"/> radio 5
    <input id="radio6" name="radios1" type="radio" value="4" data-value="radio 6"/> radio 6
    <input type="button" id="btn" value="Get from data-value" />

有关自定义数据属性的详细信息，请访问：自定义数据-*属性 获取文本的脚本：

$(document).on("click", "#btn", function () {
            var value = $("input[name=radios1]:checked").attr("data-value");
            alert(value);
        });

方法二： 将单选按钮的HTML转换为分配相同的[name]属性，然后按照以下方式放置单选按钮的"label"字段。

<input id="radio1" name="radios" type="radio"/>
        <label for="radio1"> radio 1</label>
    <input id="radio2" name="radios" type="radio"/>
        <label for="radio2"> radio 2</label>
    <input id="radio3" name="radios" type="radio"/>
        <label for="radio3"> radio 3</label>
    <input type="button" id="btn1" value="Get from Label" />

获取文本的脚本：

$(document).on("click", "#btn1", function () {
        var idVal = $('input[name=radios]:checked').attr("id");
        $("label[for='"+idVal+"']").text();
        //If you have the radio button in HTML table structure write it as below
        $('input[name=radios]:checked').parent().find('label').text();
    }

希望这能有所帮助 :)

- D.T.

Answer 5

在选择元素后，您需要调用.text()函数来获取元素的文本，就像这样：$(elm).text()。

在这种情况下，由于elm已经是DOM节点，因此您可以调用普通的elm.innerHTML以获得相同的结果。

- Elliot Bonneville

Answer 6

尝试这段代码：

$("td",$(":checked").parent().parent()).text()

jsFiddle链接 http://jsfiddle.net/rQX7H/2/

- user2084375

---

谢谢。你能解释一下选择器中那个逗号的作用吗？ - 1252748

选择 td，表示在 $(":checked").parent().parent() 中查找，这将给出整个行并获取 td 文本。 - user2084375

我明白了。我不确定如何看待将parent().parent()串在一起的做法。这种做法似乎有些混乱。不过还是谢谢你。 - 1252748

@j08691 根据user2084375的代码进行了更新，加入了一些变化和转折。 - user2063626