如何用jQuery获取全选复选框容器内子节点的span文本值

架构老林

2026-7-24

解决全选复选框选中时获取子节点span文本的问题

问题分析

原代码的核心问题是：选中全选框时，$(this).each()仅遍历当前的全选框元素本身，没有定位到包含子节点的容器，导致只能输出全选框自身的val值，无法获取子节点的span文本。

修正后的代码

var htmlObject = layerControl.getContainer().querySelectorAll('input');
$(htmlObject).on("change", function(e) {
  // 单独选中子节点复选框时，输出对应span文本
  if ($(this).is(':checked') && !$(this).hasClass('leaflet-layerstree-sel-all-checkbox')) {
    console.log($(this).siblings('span').text());
  }

  // 处理全选框选中逻辑
  const isSelectAll = $(this).is('.leaflet-control-layers-selector.leaflet-layerstree-sel-all-checkbox:checked');
  if (isSelectAll) {
    // 定位全选框所属的分组容器（需根据实际DOM结构调整选择器）
    const childContainer = $(this).closest('.leaflet-layerstree-group').find('.leaflet-control-layers-selector:not(.leaflet-layerstree-sel-all-checkbox)');
    
    // 遍历所有子节点复选框，获取对应span文本
    childContainer.each(function() {
      const childSpanText = $(this).siblings('span').text();
      console.log(childSpanText);
    });
  }
});

关键修正说明

区分全选框与子节点逻辑：通过!$(this).hasClass('leaflet-layerstree-sel-all-checkbox')过滤全选框，避免触发子节点逻辑时输出全选框的文本。
定位子节点容器：使用closest('.leaflet-layerstree-group')找到全选框所在的分组容器（如果你的DOM结构不同，可替换为父级容器的选择器，比如$(this).parent().next('ul')）。
遍历子节点并获取文本：通过:not(.leaflet-layerstree-sel-all-checkbox)排除全选框本身，遍历所有子复选框，获取其兄弟span的文本内容。