Javascript 与jQuery don'；绑定在一起的相同复选框；t同步

我有一个动态生成的表单，其中包含代表公司类别的多组复选框。这些最终会绘制在动态图表上（此处未显示）。每组公司都有一个切换按钮，用于打开或关闭每个类别中的所有复选框

有些公司属于多个类别。例如，苹果公司同时属于科技巨头和手机制造商两大类。因此，我将相同的复选框绑定在一起，这样，如果在一个类别中选中/取消选中了Apple，它将在其所在的任何其他类别中自动更改。这在单击单个复选框时效果很好，例如苹果的复选框

但是，当单击选中或取消选中整个公司类别的切换按钮时，复选框绑定不起作用。

下面是代码的完整工作示例：

点击此提琴中的Apple复选框，您将看到它在两个类别中同步。但当点击任意一个切换按钮时，苹果不会在其他类别中同步

你知道怎么解决这个问题吗

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- This button is different than the other buttons -->
<button class="button-text" id="customize-button">Open User Settings</button>

<!-- Placeholder for dynamic form -->
<div id="company-selection-form"></div>

<script type="text/javascript">

function toMachineString(humanString) {
  var machineString = humanString.replace(/\s+/g, '-').toLowerCase();
  machineString = machineString.replace('&','');
  return machineString;
}

// Setup the form
var categories = new Map([
  ['Tech Giants',['Alphabet','Amazon','Apple','Facebook','Microsoft']], 
  ['Handset Manufacturers',['Apple','Samsung','Motorola','Sony']]
  //  ... more ...
  ]);

// Build company selection form inputs
let companySelectionHTML = '';

for (let category of categories) {

  categoryName = category[0];
  categoryList = category[1];

  // Setup a div to differentiate each category of companies.
  // Will be used for turning on/off categories en masse
  companySelectionHTML += `<div id="${toMachineString(categoryName)}">\n`;

  // Category heading
  companySelectionHTML += `<h4>${categoryName}</h4><button class="category" id="btn-${toMachineString(categoryName)}" data-checked="true">Toggle</button>`;

  categoryList.forEach(companyName => {

    companySelectionHTML += `
      <label class="checkbox-label">
          <input id="x-${toMachineString(companyName)}" class="checkbox" type="checkbox" name="company" value="${companyName}" checked>
          <label for="x-${toMachineString(companyName)}">${companyName}</label>
      </label>`;
  });

  companySelectionHTML += '</div>\n</div>\n</div>\n';
}

// Append to DOM
const companySelectionId = document.getElementById('company-selection-form');
companySelectionId.insertAdjacentHTML('beforeend', companySelectionHTML);

// Arm the toggle buttons
$(document).ready(function() {
  $(document).on("click", ".category", function() {
    var buttonData = $(this).data();
    $(this).closest("div").find('input[type=checkbox]').prop('checked', !buttonData.checked);
    buttonData.checked = !buttonData.checked;
  });
});

// Bind identical checkboxes
// This works on individual checkboxes but not when clicking the toggle button
$(document).ready(function(){
  $('input:checkbox').on('change', function(){
    $('input[value="' + this.value + '"]:checkbox').prop('checked', this.checked);
    refresh();
  });
});
</script>

打开用户设置
函数toMachineString（humanString）{
var machineestring=humanString.replace（/\s+/g，'-'）.toLowerCase（）；
machineString=machineString.替换（“&”和“”）；
返机作业；
}
//设置表单
变量类别=新地图([
[‘科技巨头’、[‘字母表’、‘亚马逊’、‘苹果’、‘Facebook’、‘微软’]，
[‘手机制造商’、[‘苹果’、‘三星’、‘摩托罗拉’、‘索尼’]]
//……更多。。。
]);
//建立公司选择表输入
让companySelectionHTML=''；
for（让类别中的类别）{
categoryName=类别[0]；
类别列表=类别[1]；
//设置一个div以区分每个类别的公司。
//将用于整体打开/关闭类别
companySelectionHTML+=`\n`；
//类别标题
companySelectionHTML+=`${categoryName}切换`；
categoryList.forEach（companyName=>{
公司选择HTML+=`
${companyName}
`;
});
companySelectionHTML+='\n\n\n'；
}
//附加到DOM
const companyselection id=document.getElementById（'company-selection-form'）；
companyselection id.insertAdjacentHTML（'beforeend'，companyselection html）；
//手臂的切换按钮
$（文档）.ready（函数（）{
$（document）.on（“click”，“.category”，function（））{
var buttonData=$（this.data（）；
$（this）.closest（“div”）.find（'input[type=checkbox'））.prop（'checked'，！buttonData.checked）；
buttonData.checked=！buttonData.checked；
});
});
//绑定相同的复选框
//这适用于单个复选框，但在单击切换按钮时不起作用
$（文档）.ready（函数（）{
$（'input:checkbox'）。在（'change'，function（）上{
$（'input[value=“”+this.value+'”]：checkbox'）.prop（'checked'，this.checked）；
刷新（）；
});
});

有一个名为refresh（）的函数未定义，请将其删除， 对于触发事件，只需将change（）函数放在触发器切换之后。

---

请查看评论“我在这里做了更改”

这非常有效，谢谢！啊，是的，refresh（）函数被错误地放在那里了。

    // Arm the toggle buttons
$(document).ready(function() {
  $(document).on("click", ".category", function() {
    var buttonData = $(this).data();
    $(this).closest("div").find('input[type=checkbox]').prop('checked', !buttonData.checked).change(); //I made change here
    buttonData.checked = !buttonData.checked;
  });
});

// Bind identical checkboxes
// This works on individual checkboxes but not when clicking the toggle button
$(document).ready(function(){
  $('input:checkbox').on('change', function(){
    $('input[value="' + this.value + '"]:checkbox').prop('checked', this.checked);
    //refresh(); //I made change here
  });
});