jQuery to get childNodes of Select All input within div class container node

Question

I want to get the span text value of all the childNodes within the container of the corresponding input if the Select All checkbox is selected.

My current code picks up the 'span'.text() reference of each input label, however it will only log the label (e.g. '7211') of the childNodes checkbox (.leaflet-control-layers-selector) if selected singularly, or the label (e.g. 'Accommodation and Food Services') of the Select All checkbox (.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox) when selected:

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

I can reference the Select All input, and if it is checked, iterate through the childNodes and grab the element text references. Something like this:

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  if ($(this).is(':checked'))
  console.log($(this).siblings('span').text());
  selAll= ($(this).is('.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox:checked'))
  if (selAll == true) 
  $(this).each(function () { 
    var sthisVal = (this.checked ? $(this).val() : "")
    console.log(sthisVal)
  })
})

However, the childNodes are outside of the input class so this logs the value of 'on' for the SelectAll input checkbox. I have to reference its container or parentElement to cycle through the childNodes. The variable output will then log the text label.

Answer 1

I figured out how to obtain the text labels of selected childNodes using parent/children node references. This outputs the text labels for all childNodes if the selectAll checkbox is selected:

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  if ($(this).is('.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox:checked')) {
    console.log($(this).siblings('span').text())
    var ancestors = $(this).parents(".leaflet-layerstree-node")[0].children[1].outerText;
    console.log(ancestors) //yellow-uncollapsed, blue-collapsed
}
  else {
    if ($(this).is(':checked'))
    console.log($(this).siblings('span').text());
  }
})

However, my particular instance in this case when using SelectAll would not output the text labels with the same formatting if the tree node were collapsed. This code loops through each childNode and outputs each selection as a separate object indeterminate of collapsed state:

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  if ($(this).is('.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox:checked')) {
    console.log($(this).siblings('span').text())
    var ancestors = $(this).parents('.leaflet-layerstree-node')[0].children[1].childNodes;
    NodeList.prototype.forEach = Array.prototype.forEach
    ancestors.forEach(item =>
      console.log(item.children[0].children[1].innerText)); //red
}
  else {
    if ($(this).is(':checked'))
    console.log($(this).siblings('span').text());
  }