Return span text from selected radio button using JQuery/JavaScript

Question

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?

Answer 1

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