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

Question

我想将事件侦听器添加到所有复选框，这些复选框是使用 span 元素“全选”选择的——>请参见下面的示例。

此代码（我在 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);
});

..但不是当我点击“全选”

JSFiddle 上的示例：

https://jsfiddle.net/f3n9vxzk/3/

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

如果我在 HR->New objects->Table 下选择 TABLE2，我希望（在页面的右侧）具有与左侧类似的东西，但只有那些被选中的值。

..像这样的东西：

所以我的问题是：是否可以根据我的结构获取树中每个元素的父值？如果是的话，我会非常感谢任何帮助或只是提示（如果我做错了什么......）。

谢谢！

标签： javascriptjquery

Answer 1

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

let checkboxes = $("input[type='checkbox']");
let enabledSettings = [];

// function to show selected checkboxes
function checkbox_fun() {
  enabledSettings = checkboxes
    .filter(":checked") // Filter out unchecked boxes.
    .map(function() { // Extract values using jQuery map.
      return this.value;
    }) 
    .get() // Get array.
    
  console.log(enabledSettings);
}

$('.resultObjectsNew').on('click', 'span.selectAllNewObj', function(){
        var checked = $(this).parent().next().find('input').prop('checked');
        $(this).parent().next().find('input').prop('checked', !checked);
        checkbox_fun(); // function call
    });
    

// Attach a change event handler to the checkboxes.

checkboxes.change(function() {
  checkbox_fun(); // function call
});

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

https://jsfiddle.net/f3n9vxzk/3/