How can I get the text of radio button if radio button checked?

Question

My javascript code is :

$('input:radio[class=radio]').click(function(e){
  var txt = $(e.target).text();
  console.log(txt);
});

Demo : https://jsfiddle.net/oscar11/m7by6zcw/9/

How can I fix this?

Answer 1

text is not a valid property for input type radio button.

if you inspect the content, you will see that text is rendered as sibling to input element. you can traverse to parent label element and then get text in it.

also there is no need to use attribute eqaul selector( [class=radio] ) here as no element have class radio in it:

 $('input:radio').click(function(e){
    var txt = $(this).parent().text();
    console.log(txt);
 });

Working Demo

Answer 2

In your event handler you can use Node.nextSibling and than access to its nodeValue :

 $('input:radio[class=radio]').on('click', function () { var txt = this.nextSibling.nodeValue.trim(); console.log(txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Atletico </label> </div> </li> </ul> </div> 

Answer 3

You can achieve that by selecting the parent tag of input

$('input:radio').click(function() {
        alert($(this).parent().text());
});

You do not have a class with radio on the radio button. So it won't trigger the click event as well. You will need to remove it.

Updated Fiddle here

Answer 4

See below code snippet

 $('input:radio[class=radio]').click(function(e){ var txt = e.target.labels["0"].innerText; console.log(txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Atletico </label> </div> </li> </ul> </div> 

Answer 5

I just try your code and i find out your selector i wrong , please try this one : jsfiddle

$('input:radio').click(function(e){
        var txt = $(e.target).parent().text();
        alert(txt);
});

Answer 6

 $('input:radio').click(function(e){ var txt = $(e.target).parent().text(); alert(txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="frm"> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Atletico </label> </div> </li> </ul> </div> </form> 

Answer 7

Try below example,

HTML

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" value="Chelsea"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" value="Mu"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" value="Arsenal"> Arsenal
                </label>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" value="Madrid"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" value="Barcelona"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" value="Atletico"> Atletico
                </label>
            </div>
        </li>
    </ul>
</div>

JQUERY

<script type="text/javascript">
    $("input[type=radio]").on("click",function(e){
        alert($(this).val());
    })
</script>

Answer 8

I would apply a simple solution, which is to add "value" within your radio buttons:

Eg:

<label>
    <input type="radio" name="england" class="radio" value="Mu"> Mu
</label>

Allowing you to elegantly access the value:

$(e.target).val();