更健壮的方案是按列表项（

以下是优化后的完整解决方案：

setInterval(() => {
  document.querySelectorAll('#ordered li').forEach((li) => {
    const select = li.querySelector('select');
    const checkbox = li.querySelector('input[type="checkbox"]');

    if (!select || !checkbox) return; // 安全防护：跳过缺失元素

    if (checkbox.checked) {
      select.style.borderColor = select.value === '0' ? 'red' : 'green';
      select.style.borderWidth = '2px'; // 统一加粗边框增强视觉反馈
    } else {
      select.style.borderColor = 'gray';
      select.style.borderWidth = '1px'; // 恢复默认粗细
    }
  });
}, 100);

? 关键改进说明：

• ✅ 结构驱动定位：不再依赖易出错的 index，而是以
• 为作用域单元，确保 select 与 checkbox 的逻辑归属一一对应；
• ✅ 完整状态覆盖：if/else 明确处理“勾选→红/绿”与“未勾选→灰”两种互斥状态，消除颜色残留；
• ✅ 防御性编程：添加 !select || !checkbox 判断，防止因 DOM 缺失导致脚本中断；
• ✅ 样式一致性：同步控制 borderWidth，避免仅改颜色导致视觉突兀。

? 额外建议：

• 将 setInterval 替换为事件监听（如 checkbox.addEventListener('change', ...) 和 select.addEventListener('change', ...)）可显著提升性能，避免每 100ms 全量扫描；
• 使用 CSS 自定义属性（如 --border-color）配合 style.setProperty() 更利于主题扩展；
• 若需支持无障碍访问，建议为 select 添加 aria-describedby 关联 checkbox 状态提示。

该方案简洁、鲁棒、可维护，适用于任意数量的题项列表，是表单状态可视化控制的推荐实践。