如何实现点击验证按钮后修改CheckBox标签颜色：正确绿错误红

首先你的现有代码存在结构缺失和逻辑不完善的问题，以下是修正后的完整实现方案：

1. 完善HTML结构 #

原代码缺少CheckBox元素，需要给每个选项对应添加复选框，并通过<label>标签关联复选框和文本，方便后续修改文本颜色：

<label for="choix1">
  <input type="checkbox" id="choix1" name="amount"> 50
</label>
<br>
<label for="choix2">
  <input type="checkbox" id="choix2" name="amount"> 100
</label>
<br>
<label for="choix3">
  <input type="checkbox" id="choix3" name="amount"> 500
</label>
<br>
<label for="choix4">
  <input type="checkbox" id="choix4" name="amount"> 1000
</label>
<br/>
<button onclick="verif();">VERIFIER</button>
<script src="script.js"></script>

2. 修正JavaScript验证逻辑 #

假设正确选项为100（可根据实际需求自行修改），在验证函数中判断选中状态并对应修改标签颜色：

function verif() {
  // 先重置所有标签的颜色为默认值，避免残留之前的颜色
  document.querySelectorAll('label').forEach(label => {
    label.style.color = '';
  });

  // 指定正确选项的id
  const correctId = 'choix2';
  
  // 遍历所有复选框，检查选中状态并修改对应标签颜色
  document.querySelectorAll('input[type="checkbox"]').forEach(input => {
    const targetLabel = document.querySelector(`label[for="${input.id}"]`);
    if (input.checked) {
      targetLabel.style.color = input.id === correctId ? 'green' : 'red';
    }
  });
}

关键说明 #

• 使用<label>的for属性关联复选框的id，既可以实现点击文本选中复选框的交互，也能精准定位到要修改颜色的文本标签。
• 每次验证前重置所有标签颜色，避免多次点击后颜色混乱。
• 可通过修改correctId的值快速切换正确选项。

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