CODEWITHSUNDEEP
jquery
1252748
1252748

Reputation: 15372

get text of label that belongs to checked radio button

I'm trying to get the text of the labels that belong to checked radio buttons, but don't seem quite to be able to. 

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

For whatever reason that just prints out

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

in the console. What have I done wrong?

Upvotes: 16

Views: 63363

Answers (6)

Melu
Melu

Reputation: 1905

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

Upvotes: 4

D.T.
D.T.

Reputation: 350

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.

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

    <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

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

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

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

Upvotes: 41

user2084375
user2084375

Reputation:

Try this code :

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

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

Upvotes: 0

j08691
j08691

Reputation: 207901

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

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

Upvotes: 5

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

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

In this case, since elm is a DOM node already, you can call plain elm.innerHTML for the same result.

Upvotes: 0

Related Questions