嘿，我来帮你搞定这个小问题！你已经找对方向了，只需要把“判断用户是否选中答案”的具体逻辑补全就行。下面分场景给你具体实现代码：

1. 单选按钮场景（最常见的答题模式） #

假设你的答案是一组name属性统一的单选按钮，HTML大概是这样：

<input type="radio" name="quiz-answer" value="opt1"> 选项A
<input type="radio" name="quiz-answer" value="opt2"> 选项B
<input type="radio" name="quiz-answer" value="opt3"> 选项C

<button id="btnNxt" style="display: none;">下一页</button>

对应的JavaScript代码如下：

// 封装一个函数，专门处理按钮的显示/隐藏逻辑
function toggleNextButton() {
  // 查找是否有选中的单选按钮
  const hasSelectedAnswer = document.querySelector('input[name="quiz-answer"]:checked') !== null;
  const nextButton = document.getElementById('btnNxt');
  
  // 三元运算符简化判断，选中就显示，否则隐藏
  nextButton.style.display = hasSelectedAnswer ? 'block' : 'none';
}

// 页面加载完成后先执行一次，确保初始状态正确（按钮默认隐藏）
document.addEventListener('DOMContentLoaded', toggleNextButton);

// 给所有单选按钮绑定change事件，用户选答案时实时触发检查
document.querySelectorAll('input[name="quiz-answer"]').forEach(radio => {
  radio.addEventListener('change', toggleNextButton);
});

2. 复选框场景（允许多选的情况） #

如果是复选框，只需要修改判断逻辑，检查是否至少有一个选项被选中：

function toggleNextButton() {
  // 统计选中的复选框数量
  const selectedCount = document.querySelectorAll('input[name="quiz-answer"]:checked').length;
  const nextButton = document.getElementById('btnNxt');
  
  nextButton.style.display = selectedCount > 0 ? 'block' : 'none';
}

// 事件绑定和初始化步骤和单选按钮完全一致，这里就不重复啦

3. 适配你自己的HTML结构 #

如果你的答案选项不是用name="quiz-answer"，记得把代码里的选择器改成你实际的：

• 选项有共同的class：document.querySelectorAll('.answer-option:checked')
• 选项在某个特定容器里：document.querySelector('#question-box input:checked')

这样调整后，就能完美实现你想要的功能了！

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