jQuery：一个按钮，它检查自己的 DIV 中的所有复选框并取消选中所有其他复选框

Question

我有一个动态生成的表单，其中包含代表公司类别的复选框组。这些最终被绘制在动态图表上（此处未显示）。每组公司都在一个 div 中，每个 div 都有一个名为 Only 的按钮，该按钮应选中其自己类别 (div) 中的所有复选框，并取消选中页面上的所有其他复选框。

这是一个包含所有代码的小提琴：https://jsfiddle.net/c2kn78a9/

仅按钮中包含以下代码：

// Uncheck all checkboxes outside this div
$(this).closest("div").not(this).find('input[type=checkbox]').prop('checked', false).change();

// Check all checkboxes in this div
$(this).closest("div").find('input[type=checkbox]').prop('checked', true).change();

但它不起作用。知道如何解决这个问题吗？

这是整个页面的代码。

<!-- 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']],
  ['Semiconductors', ['AMD','Intel','Nvidia']]
  //  ... 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>\n`;

  // Only button
  companySelectionHTML += `<button class="only" id="btn-only-${toMachineString(categoryName)}">Only</button>\n`;

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

// Make the ONLY buttons check all the checkboxes in their div and uncheck everything else
$(document).ready(function() {
  $(document).on("click", ".only", function() {

    // Uncheck all checkboxes outside this div
    $(this).closest("div").not(this).find('input[type=checkbox]').prop('checked', false).change();

    // Check all checkboxes in this div
    $(this).closest("div").find('input[type=checkbox]').prop('checked', true).change();

  });
});

</script>

谢谢！

Answer 1

您的.not(this) 正在尝试从最近的单个 div 中过滤掉按钮元素。您需要获取页面上的所有 div 并删除最接近“this”按钮的 div。

像这样从你的 JSFiddle 中：

var temp = $(this).closest("div");
$("div").not(temp).find('input[type=checkbox]').prop('checked', false).change();

OR（避免新变量）

$("div").not($(this).closest("div")).find('input[type=checkbox]').prop('checked', false).change();

Answer 2

Matt G 的解决方案工作正常，它取消选择页面上的所有复选框。 我建议通过首先将选择范围缩小到您的#company-selection-form 来进一步完善它

  `$("#company-selection-form")
    .find("div")
    .not($(this)
    .closest("div"))
    .find('input[type=checkbox]')
    .prop('checked', false)
    .change();`

尽管如此，请允许我建议您学习这些东西可能是在浪费时间。这种编程范式太成问题且不合时宜。它很慢，很快就会失控，除了痛苦之外什么都没有。即使是最轻微的 UI 更新也会迫使您重新访问（有时几个月后）、调试和重写您的代码。它永远无法测试，甚至没有人会费心对其进行严格测试。

我的意思是，如果你的雇主每天都拿枪指着你的脑袋，而你必须选择这样做还是死，那么你很快就会选择死于这场磨难。