CODEWITHSUNDEEP
jqueryhtmlradio-buttonradiobuttonlist
Jelle
Jelle

Reputation: 206

Return span text from selected radio button using JQuery/JavaScript

I have a list of radio buttons of which only one can be checked. I would like to retrieve the values from the selected radio button. I do not seem to get any text in returned alert.

Please note that this HTML is generated automatically and therefore I cannot edit it. Adding value to the is therefore not possible.

<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
    <label>
        <input class="leaflet-control-layers-selector" type="radio" checked="checked" name="leaflet-base-layers"></input>
            <span>
                Gemeenten
            </span>
   </label>
   <label>
        <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
            <span>
                Wijken
            </span>
   </label>
   <label>
       <input class="leaflet-control-layers-selector" type="radio" name="leaflet-base-layers"></input>
           <span>
               Buurten
           </span>
   </label>
</div>
</form>

This is the jQuery Script which I use:

radioButtonText = $('input[name=leaflet-base-layers].leaflet-control-layers-selector:checked').html();
alert(radioButtonText);

Does anybody know how I can return the text `Gemeenten´, ´Buurten´ or ´Wijken´ depending on which radio button is selected?

Upvotes: 1

Views: 3299

Answers (3)

Rob Y
Rob Y

Reputation: 214

*) Your selector is missing quotes around the item name.

*) You probably don't need the class ".leaflet-control-layers-selector" if you are using the button names.

*) You don't want .html() from the input, you want it from the following span which you can get using .next().

It should be: 

radioButtonText = $('input[name="leaflet-base-layers"]:checked').next().html();
alert(radioButtonText);

Upvotes: 1

Keerthi
Keerthi

Reputation: 923

Get the next html of the clicked radio button.

$(document).ready(function(){
 $("input[type=radio]").click(function(e) {
        var inputs = $('input[type=radio]');
            alert($(this).next().html());

    });

});

Working fiddle: http://jsfiddle.net/5u94gzb8/

Upvotes: 1

Vincent
Vincent

Reputation: 1730

Set a value attribute in the input radio 

<input value="Gemeenten" class="leaflet-control-layers-selector" type="radio" checked="checked" name="leaflet-base-layers">

And grab the radio input value using the .val() method

radioButtonText = $('input[name=leaflet-base-layers].leaflet-control-layers-selector:checked').val();
alert(radioButtonText);

And if you need the span html content:

radioButtonText = $('input[name=leaflet-base-layers].leaflet-control-layers-selector:checked');

var label_value = radioButtonText.closest('label').find('span').html();
alert(label_value);

Upvotes: 2

Related Questions