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

Posted 2023-05-09

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

【英文标题】：jQuery: A button that checks all checkboxes in its own DIV and unchecks all the others

【发布时间】：2020-09-30 06:02:14

【问题描述】：

我有一个动态生成的表单，其中包含代表公司类别的复选框组。这些最终被绘制在动态图表上（此处未显示）。每组公司都在一个 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>

谢谢！

【问题讨论】：

同时添加您的 HTML 代码，以使这个问题更容易理解。

HTML 代码确实存在。请记住，表单是动态生成的。

【参考方案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();

【讨论】：

我无法让任何一个示例工作。你有没有机会把它放到 Fiddle 中进行测试？

哦，等等，对不起，我搞砸了。它工作得很好。谢谢！

【参考方案2】：

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

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

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

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

【讨论】：

:) 你没有错。但如果你相信的话，这是用于业余项目的代码！