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

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

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

enter image description here

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

    yellow -uncollapsed w/ first code; blue - collapsed with first code; red - collapsed/uncollapsed with second code.


  2. 0

    I’m not sure that I fully understand what you are trying to do, but I think I can help you get on the right path.

    // Get our container element, all subsequent jQuery calls will be scoped to this container - so only its children will be affected.
const $container = $('.container-1');
// Listen for changes on checkbox inputs that are NOT the Select All checkbox
$('input:not(.leaflet-layerstree-sel-all-checkbox)', $container).on("change", function(e) {
  // Is the container's Select All Checkbox checked?
  const isSelectAll = $('.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox', $container).is(':checked');
  // If Select All is not checked, exit early.
  if (!isSelectAll) { return; }
  
  // Loop through all of the non-Select All checkboxes in the container
  $('input:not(.leaflet-layerstree-sel-all-checkbox)', $container).each(function () {
    if ($(this).is(':checked')) {
      // If this checkbox is checked, log its sibling span's text
      console.log($(this).siblings('span').text());
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-1">
  <input class="leaflet-control-layers-selector leaflet-layerstree-sel-all-checkbox" type="checkbox">
  <span>Accomodation and Food Services</span>

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

Back To Top
Search