How do I select one at a time with javascript or jQuery

Question

I have the following code that is generated by leaflet. Leaflet does not use the proper syntax in their HTML and so this is a bit difficult.

I am looking to create <button> elements that correspond to each <input> so that I can trigger them without having to deal with applying styling on top of leaflet.

<div class="leaflet-control-layers-base">
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span> All Activities</span>
    </div>
  </label>
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span> 
        <span id="icons1">Beaches</span>
      </span>
    </div>
  </label>
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span>
        <span id="icons2">Wading pools</span>
      </span>
    </div>
  </label>
  <label>
    <div>
      <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157">
      <span>
        <span id="icons3">Swimming pools</span>
      </span>
    </div>
  </label>
</div>

I cannot edit this HTML because it is generated by leaflet. If I were to give each one and I'd I would need to do so with javascript, so same problem. I want to hide the inputs off screen and use a ` — Arrakis_Surfer, Aug 19 '20 at 08:10

score 0 · Answer 1 · answered Aug 19 '20 at 08:10

You can select all of those inputs with querySelectorAll:

const inputs = document.querySelectorAll("input.leaflet-control-layers-selector");

That gives you a NodeList, which you can loop through via forEach (in modern browsers) or index into via length and [].

For instance, adding a button:

const list = document.querySelectorAll("input.leaflet-control-layers-selector");
for (const input of list) {
    input.insertAdjacentHTML(
        "afterend",
        "<button type=button>Some Button</button>"
    );
}

<div class="leaflet-control-layers-base">
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> All Activities</span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons1">Beaches</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons2">Wading pools</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons3">Swimming pools</span></span></div>
    </label>
</div>

For slightly older browsers, you may need to use forEach instead, and on even older ones, you may need to polyfill forEach. This answer goes into that part of things in detail.

Or if you wanted the buttons at the end of the spans:

const list = document.querySelectorAll("input.leaflet-control-layers-selector");
for (const input of list) {
    input.nextElementSibling.insertAdjacentHTML(
        "afterend",
        "<button type=button>Some Button</button>"
    );
}

<div class="leaflet-control-layers-base">
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> All Activities</span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons1">Beaches</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons2">Wading pools</span></span></div>
    </label>
    <label>
        <div><input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers_157"><span> <span id="icons3">Swimming pools</span></span></div>
    </label>
</div>

Etc.

score 0 · Accepted Answer · answered Aug 19 '20 at 09:04

I think you should think into a other direction.

Don't try to replace/use the leaflet layer controler to get what you want. I recommend that you listen on a button click directly and then add / remove the layers:

<button onclick="showBeachesLayer()">Beaches Layer</button>



function showBeachesLayer(){
  map.addLayer(beaches)
  if(map.hasLayer(swimmingpools)){ // for each layer what should be removed
    map.removeLayer(swimmingpools);
  }
}

https://jsfiddle.net/falkedesign/bpy297kz/

How do I select one at a time with javascript or jQuery

2 Answers2