Turn on radio button with span label as input

Question

I have the following automatically generated HTML script that creates radio buttons. Based on the Span label as input, I would like to check the corresponding radio button. Any Ideas how I can do that? This script is alreasy automatically generated throough an AI and therefore I cannot edit this script itself. Also, these radio buttons do not have ID nor value attributes.

<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
    <label>
        <input class="leaflet-control-layers-selector" type="radio" 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>

Answer 1

Here is a way to do it, not using a library (no jQuery needed). This example will check "Buurten" :

function check(label){
    for(var i=0, l=labels.length; i<l; i++){
        if(labels[i].textContent.trim(' ') == label){
            labels[i].parentNode
                     .getElementsByClassName('leaflet-control-layers-selector')[0]
                     .checked = true;
            return true;
        }
    }
    return false; // Label not found
}

var labels = document.querySelectorAll('.leaflet-control-layers-base label span');

// Check the element called "Buurten"
check('Buurten');

<!-- Exact HTML from your question -->
<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>

Answer 2

Basic HTML

According to W3C's label specification:

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.

So your HTML already has this functionality. Just run the code snippet and see:

<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 most basic and easiest implementation of what you want and you already have it, so anything else on top of this will overcomplicate things.

jQuery

If you really want to do this with jQuery, because you have some other scripts that mess with this functionality then just add an event listener for your span elements:

var spans = $('.leaflet-control-layers-base > label > span');
for (var i = 0; i < spans.length; ++i) {
  $(spans[i]).click(function() {
    $(this).parent().children('input.leaflet-control-layers-selector')[0].checked = true;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

JavaScript

Or with pure JavaScript (this way you don't need a library but probably won't work with older browsers):

var spans = document.querySelectorAll('.leaflet-control-layers-base > label > span');
for (var i = 0; i < spans.length; ++i) {
  spans[i].addEventListener('click', function() {
    this.parentNode.getElementsByClassName('leaflet-control-layers-selector')[0].checked = true;
  });
}

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