Question 10771 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Get checked element by span class using jQuery

I’m using a plugin that creates a span class element based on a label I’ve defined in a separate javascript file.
I want to create an eventListener for when the checkbox has been checked and reference the text in the span class using jQuery.
However, I am not sure on how to reference the span class for each label class #leaflet-layerstree-header-label input.

Something like an example here that adds a map function to obtain the collection.

The element for each label is referenced as such:

<label class="layerstree-header-label">
  <input type="checkbox" class="control-layers-selector">
  <span class="layerstree-header-name">7211</span>
</label>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I figured out I have to reference the container for the module in order to obtain the text for the selection. The solution that worked was as follows (with contribution from @Tushar):

    var layerControl = L.control.layers.tree (baseMaps, overlaysTree, {
  collapsed: false
})

var htmlObject = layerControl.getContainer().querySelectorAll('input');

$(htmlObject).on("change", function(e) {
  if ($(this).is(':checked'))
    console.log($(this).siblings('span').text());
});

  2. 0

    You can attach the event listener on change event for the checkbox and use .siblings to find the span

    $(".control-layers-selector").on("change", function(e) {
  if ($(this).is(':checked'))
    console.log($(this).siblings('span').text());
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="layerstree-header-label">
  <input type="checkbox" class="control-layers-selector">
  <span class="layerstree-header-name">7211</span>
</label>

<label class="layerstree-header-label">
  <input type="checkbox" class="control-layers-selector">
  <span class="layerstree-header-name">9090</span>
</label>

<label class="layerstree-header-label">
  <input type="checkbox" class="control-layers-selector">
  <span class="layerstree-header-name">9090</span>
</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search