jQuery 获取属于选中单选按钮的标签文本

get text of label that belongs to checked radio button

提问by 1252748

I'm trying to get the textof the labels that belong to checkedradio buttons, but don't seem quite to be able to.

我正在尝试获取text属于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

jsbin

For whatever reason that just prints out

无论出于何种原因，只是打印出来

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

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

in the console. What have I done wrong?

在控制台中。我做错了什么？

回答by Siva Charan

Do this way:-

这样做：-

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

Refer LIVE DEMO

参考现场演示

UPDATED:

更新：

Below are documentation references:-

以下是文档参考：-

• Category: Selectors
• Attribute Equals Selector [name="value"]

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

回答by j08691

Try this:

尝试这个：

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

jsFiddle example

jsFiddle 示例

Update: Since they're radio buttons, an even faster method is:

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

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

jsFiddle example

jsFiddle 示例

回答by Elliot Bonneville

You need to call the .text()function to get the text of the element once you've selected it, like this: $(elm).text().

你需要调用.text()函数来获取元素的文本一旦你选择了它，就像这样：$(elm).text()。

In this case, since elmis a DOM node already, you can call plain elm.innerHTMLfor the same result.

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

回答by Elliot Bonneville

Try this code :

试试这个代码：

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

Link for jsFiddle http://jsfiddle.net/rQX7H/2/

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

回答by D.T.

You can do this is in many ways depending on the HTML written for the radio button and the text for the radio button, I am sighting 2 of the ways which can be done with very less efforts.

您可以通过多种方式执行此操作，具体取决于为单选按钮编写的 HTML 和为单选按钮编写的文本，我看到了两种可以轻松完成的方法。

Method 1: Assign custom data-attributes to the radio button with the same text which is to be displayed.

方法 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" />

For details on Custom Data Attributes, visit : Custom Data-* Attributes

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

Script for getting the text :

获取文本的脚本：

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

Method 2: Convert the html for the radio buttons so as to assign a same [name] property for all of them, then place "label" fields for the radio buttons as below

方法 2：转换单选按钮的 html，以便为所有这些按钮分配相同的 [name] 属性，然后为单选按钮放置“标签”字段，如下所示

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

Script for getting the text :

获取文本的脚本：

$(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();
    }

Hope this helps :)

希望这可以帮助 ：）

回答by Melu

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