与 jQuery 绑定在一起的相同复选框不同步

Posted 2023-05-09

【中文标题】与 jQuery 绑定在一起的相同复选框不同步

【英文标题】：Identical checkboxes bound together with jQuery don't sync

【发布时间】：2020-09-29 00:02:27

【问题描述】：

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

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

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

这是代码的完整工作示例：https://jsfiddle.net/105q7d94/1/

单击此 Fiddle 中的 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>

【参考方案1】：

    // 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
  );
);

有调用的 refresh() 函数没有定义，所以删除它， 对于触发事件，只需在触发切换后放置 change() 函数。 请查看评论“我在这里做了更改”

【讨论】：

这很好用，谢谢！啊，是的，refresh() 函数被错误地留在了那里。