如何使用jQuery通过span类获取选中复选框对应的元素

• 绑定动态元素的事件：因为你的元素是插件动态生成的，直接绑定普通事件可能无效，得用事件委托监听复选框的勾选变化：

// 监听所有.control-layers-selector复选框的change事件
$(document).on('change', '.control-layers-selector', function() {
    // 获取当前复选框对应的span文本
    const spanText = $(this).siblings('.layerstree-header-name').text();
    
    // 根据勾选状态执行后续逻辑
    if ($(this).is(':checked')) {
        console.log(`勾选了：${spanText}`);
        // 此处写入勾选后的操作代码
    } else {
        console.log(`取消勾选：${spanText}`);
        // 此处写入取消勾选后的操作代码
    }
});

• 两种关联对应Span的可靠方法：

  1. 同级元素查找：$(this).siblings('.layerstree-header-name')，利用input和span同属一个label下的同级关系定位
  2. 父容器兜底查找：$(this).closest('.layerstree-header-label').find('.layerstree-header-name')，通过父label容器定位目标span，元素结构变动时更稳定

• 批量获取所有已勾选的Span文本：如果需要一次性拿到所有勾选项的文本，可用map方法实现：

const allSelectedTexts = $('.control-layers-selector:checked').map(function() {
    return $(this).siblings('.layerstree-header-name').text();
}).get();
// 结果为包含所有勾选文本的数组，例：["7211", "xxx"]
console.log(allSelectedTexts);

内容的提问来源于stack exchange，提问作者Ciara Spencer