在复选框列表中如何只显示下一个未选中的项目？

Question

我有一系列复选框，按第一项到最后一项的顺序排序。我想做的只是显示下一个尚未检查的项目。虽然我的清单上现在有 17 项，但随着时间的推移，它可能会上下变化。

我一直在玩:nth-last-child，但我无法实现我想要的。

以下是显示每个复选框项目的 HTML 示例。

<div class="my-check-col-12">...</div>
<div class="my-check-col-12">
  <span class="fa-stack" style="">
    <i class="far fa-circle fa-stack-2x myc-text-type">
      ::before
    </i>
    <i class="fa-stack-1x fas fa-times myc-text-type">
    ::before
    </i>
  </span>
Item not complete</div>
<div class="my-check-col-12">...</div>

感谢所有帮助

谢谢

Answer 1

“使用 JavaScript 选中一个复选框时，显示下一个未选中的同级复选框。使用 nextElementSibling 进行选择并切换显示类。简单且让待办事项感觉一次可以完成一项任务。”

HTML：

<div class="my-check-col-12">
  <input type="checkbox" class="checkbox">
  <span class="fa-stack" style="">
    <i class="far fa-circle fa-stack-2x myc-text-type"></i>
    <i class="fa-stack-1x fas fa-times myc-text-type"></i>
  </span>
  Item not complete
</div>

JavaScript：

// Get all checkboxes and their parent divs
const checkboxes = document.querySelectorAll('.checkbox');
const items = document.querySelectorAll('.my-check-col-12');

// Find the next unchecked checkbox and display its corresponding item
function showNextUncheckedItem() {
  for (let i = 0; i < checkboxes.length; i++) {
    if (!checkboxes[i].checked) {
      items[i].style.display = 'block';
      break;
    }
  }
}

// Call the function to display the next unchecked item
showNextUncheckedItem();

JavaScript 可以找到下一个未选中的复选框，并在选中一个复选框时显示其项目。它选择下一个同级，检查是否未选中，然后切换显示类以一次仅显示一个项目。这有助于逐项处理待办事项列表，以保持动力并让大型任务感觉可行。