Javascript 一次选中全部时，将事件侦听器添加到复选框

我想将事件侦听器添加到所有复选框中，这些复选框是用span元素“select all”-->选中的，请参见下面的示例

此代码（我在stackoverflow的其他问题上发现）仅在手动选中复选框时有效：

// Attach a change event handler to the checkboxes.
checkboxes.change(function() {
  enabledSettings = checkboxes
    .filter(":checked") // Filter out unchecked boxes.
    .map(function() { // Extract values using jQuery map.
      return this.value;
    }) 
    .get() // Get array.
    
  console.log(enabledSettings);
});

…但当我点击“全选”时

JSFIDLE上的示例：

此外，我希望在页面右侧显示选定的复选框值，例如：

如果我在HR->New objects->Table下选择TABLE2，我希望（在页面的右侧）有一些类似于左侧的内容，但只有那些被选中的值

....类似这样的：

所以我的问题是：是否有可能根据我的结构得到树中每个元素的父值？如果是，我将非常感激任何帮助或只是暗示（如果我做错了什么…）

---

谢谢大家!

代码同时使用手动选择并单击“全选”

let checkbox=$（“输入[type='checkbox']”）；
让enabledSettings=[]；
//用于显示选定复选框的函数
函数复选框_fun（）{
启用设置=复选框
.filter（“：checked”）//筛选出未选中的框。
.map（函数（）{//使用jQuery映射提取值。
返回此.value；
}) 
.get（）//获取数组。
console.log（启用设置）；
}
$（'.resultObjectsNew'）。在（'click'，'span.selectAllNewObj'，function（）上{
var checked=$（this.parent（）.next（）.find（'input'）.prop（'checked'）；
$（this）.parent（）.next（）.find（'input'）.prop（'checked'，！checked））；
复选框_fun（）；//函数调用
});
//将更改事件处理程序附加到复选框。
复选框。更改（函数（）{
复选框_fun（）；//函数调用
});

将上面的代码复制到下面的JSFIDLE并成功运行代码：

---

heey，非常感谢，这很有效！：）创建新函数的好技巧。。也许你能帮我回答第二个“问题”：要得到每个家长div的文本？我可以给你一个提示，让你自己尝试一下，以便更好地理解。在选择框时，您拥有对象，也可以找到它们的父对象。因此，在找到所需元素后，只需在页面的右侧显示它们。