如何检查是否检查了不同选项卡中的每个复选框？

Question

我正在开发一个以 Java 作为后端技术、JSP 和 JS 在前端使用 jQuery 的项目。我是 JS 和 jQuery 的新手，或者至少我不是专业人士，所以我在这里尽力做到最好。

所以问题是：我正在处理这个屏幕，它显示两个或更多用户以及一些与他们相关的信息。每个用户（及其信息）位于不同的选项卡上。每个用户/选项卡都有一个复选框，必须选中才能进入下一个屏幕。因此，如果我们有两个用户，则必须选中两个复选框。如果我们有五个，全部五个。屏幕是这样的（记住粉红色的是选中的用户）：

所以问题是，有时我的逻辑运行良好，我可以在选中所有复选框后进入下一个屏幕。但是在刷新页面后的其他时候，正如我使用一些console.logs 发现的那样，第一个用户的复选框正在执行所有复选框的代码，而其余的复选框没有做任何事情。所以我不能进入下一个屏幕，除非我选中所有用户中的复选框，最后一个是第一个。如果我取消选中第二个用户上的复选框，也会发生同样的情况，它什么也不做，因为它的代码没有执行。

我有一个关于更改的 JS 函数，它检查是否所有复选框都被选中，以便将箭头显示到下一个屏幕。像这样：

$("#demPricesCheckbox").change(function () {
  var checkboxes = document.querySelectorAll("[id='demPricesCheckbox']");
  var show = true;
  for (var i = 0; i < checkboxes.length && show; i++) {
    if (!checkboxes[i].checked) show = false;
  }
  if (show) {
    ContractPrices.showForwardButton();
  } else {
    ContractPrices.hideForwardButton();
  }
});

我的复选框 HTML 内容如下：

<label class="sub-checkbox" style="margin-left: 100px; margin-top: 5px">
  <input
    type="checkbox"
    id="demPricesCheckbox"
    name="demPricesCheckbox"
    value="1"
  />
  <branches:message code="NAME_OF_CHECKBOX" />
</label>

有什么提示吗？我将不胜感激任何关于为什么会发生这种情况的想法或解释。如果您需要更多信息，请询问我。

感谢您的宝贵时间！请原谅我的英语不好！

Answer 1

您的逻辑很接近，但有几点需要牢记。

• HTML 元素应具有唯一 id 属性，这意味着您在任何页面上都不应有超过 1 个具有相同 id 的元素。
• 您应该在每次交互时检查用户界面的“状态”——这是反应式编程的基础，也是 jQuery/React/Vue 让事情变得简单的基础。

我已经编写并注释了一些有助于澄清的代码。

// You have jQuery installed, so let's use that instead of vanilla
// This is a CSS selector for "all checkboxes in the DOM".
$("input[type='checkbox']").change(() => {
  // Count how many checkboxes you have on the page
  // You can use a different method
  const totalNumberOfCheckboxes = $("input[type='checkbox']").length;

  let countChecked = 0;

  // Now, let's loop through them all and see if they are all checked
  $("input[type='checkbox']").each((index, element) => {
    // Increase the counter only if the checkbox is checked
    if (element.checked) {
      countChecked += 1;
    }
  });

  // Now, let's check if they are all checked!
  if (totalNumberOfCheckboxes === countChecked) {
    // Enable your button
    console.log("Enabling the next button");
    $(".btn.next").removeAttr("disabled");
  } else {
    // Disable the button
    console.log("Disabling the next button because all the checkboxes are not checked.");
    $(".btn.next").attr("disabled", "disabled");
  }
});

// Next button click listener
// This will only trigger when clicked, and the button is "enabled" – i.e.: not "disabled"
$(".btn.next").click(() => {
  console.log('Go to the next page :)')
  
  // This is just for the example – it disables all the checkboxes again
  $("input[type='checkbox']").each((index, element) => {
    element.checked = false;
  });
});

// Setup
// This is not waiting for events, so it will run
// when the page is loaded
console.log("Disabling the next button because the page has just been loaded");
$(".btn.next").attr("disabled", "disabled");

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

<div>
    <input id="user1" type="checkbox" />
    <label for="user1">User 1</label>
</div>
<div>
    <input id="user2" type="checkbox" />
    <label for="user2">User 2</label>
</div>
<div>
    <input id="user3" type="checkbox" />
    <label for="user3">User 3</label>
</div>

<button class="btn next">Next</button>