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

前提说明 #

首先需要明确已完成项的标识规则：比如给已完成的.my-check-col-12添加专属类（如.my-completed），或者通过图标类区分（已完成项用fa-check替代fa-times）。以下方案默认以「已完成项添加.my-completed类」为前提。

方案1：纯CSS实现（有场景限制） #

仅当所有项为直接兄弟元素时生效，利用CSS伪类和相邻选择器控制显示：

/* 默认隐藏所有项 */
.my-check-col-12 {
  display: none;
}

/* 显示第一个未完成项 */
.my-check-col-12:not(.my-completed):first-of-type {
  display: block;
}

/* 显示最后一个已完成项后的第一个未完成项 */
.my-completed + .my-check-col-12:not(.my-completed) {
  display: block;
}

/* 隐藏该未完成项之后的所有未完成项 */
.my-completed + .my-check-col-12:not(.my-completed) ~ .my-check-col-12:not(.my-completed) {
  display: none;
}

局限性 #

仅支持连续兄弟元素结构，无法处理中间穿插已完成项的复杂场景。

方案2：JavaScript实现（灵活适配，推荐） #

适配任意数量的项和复杂完成状态，逻辑清晰易维护：

// 获取所有复选框项
const checkItems = document.querySelectorAll('.my-check-col-12');

function showNextUncompleted() {
  // 先隐藏所有项
  checkItems.forEach(item => item.style.display = 'none');
  
  // 找到第一个未完成项（通过是否含.my-completed类判断）
  const nextUncompleted = Array.from(checkItems).find(item => !item.classList.contains('my-completed'));
  
  // 显示找到的未完成项
  if (nextUncompleted) nextUncompleted.style.display = 'block';
}

// 初始化执行
showNextUncompleted();

// 绑定状态切换事件（点击图标切换完成状态后更新显示）
document.addEventListener('click', e => {
  const targetStack = e.target.closest('.fa-stack');
  if (!targetStack) return;
  
  const item = targetStack.closest('.my-check-col-12');
  item.classList.toggle('my-completed');
  showNextUncompleted();
});

适配图标区分的场景 #

如果你的完成状态是通过图标类（fa-check/fa-times）区分，修改判断逻辑即可：

const nextUncompleted = Array.from(checkItems).find(item => {
  return item.querySelector('.fa-stack-1x').classList.contains('fa-times');
});

核心逻辑总结 #

不管用哪种方案，核心都是定位第一个未完成的项，仅显示它并隐藏其他所有项。JS方案无需关心项的数量变化，会自动遍历处理所有项。

内容的提问来源于stack exchange，提问作者gwmbox