JavaScript中Checkbox值判断异常致全部文本变红的问题排查与修复

我有多个checkbox，每个的value设为"0"或"1"，想要实现：当checkbox的value为"0"时，其对应的文本颜色变为红色。但运行函数后所有checkbox的文本都变成了红色；哪怕把判断条件改成value="1"，结果也没有变化。

你的代码中使用了checkbox.parentNode.style.color = "red"，但checkbox的父节点是整个<div id="trueFalseForm">容器，并非单个选项的独立容器。只要有一个符合条件的checkbox，就会把整个div的文本颜色设为红色，而所有选项都在这个div内，自然全部文本都会变红。后续循环中若有其他checkbox满足条件，还会重复设置同一个div的样式，导致不管条件怎么修改，最终所有文本都会被设置成红色。

另外你的HTML存在规范问题：两个div使用了相同的id="trueFalseForm"，id在HTML中必须唯一，这也可能引发后续DOM操作的异常。

这里提供两种可行的修复方式：

方式1：给每个选项添加独立容器（推荐，结构更清晰） #

修改HTML，将每个checkbox和对应的文本包裹在<label>标签中，让每个选项拥有独立的父容器，避免影响其他选项：

<div class="trueFalseForm">
  <label>
    <input type="checkbox" name="q19" value="0"> <b>a)</b> The motion of the ball is simple harmonic motion.
  </label><br>
  <label>
    <input type="checkbox" name="q19" value="1"> <b>b)</b> The speed of the ball when it hits the ground is $10\ \text{m/s}$.
  </label><br>
  <label>
    <input type="checkbox" name="q19" value="1"> <b>c)</b> The motion of the ball is periodic.
  </label><br>
  <label>
    <input type="checkbox" name="q19" value="0"> <b>d)</b> The period of the ball's motion is $1\ \text{s}$.
  </label><br>
</div>
<!-- Question 2的HTML做同样修改，同时把id改为class -->

JS代码无需大幅修改，此时checkbox的父节点是<label>，只会影响当前选项的文本：

const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
for (let k = 0; k < allCheckboxes.length; k++) {
  const checkbox = allCheckboxes[k];
  if (checkbox.value === "0") {
    checkbox.parentNode.style.color = "red";
  }
}

方式2：直接定位checkbox后的文本节点（无需修改HTML结构） #

如果不想调整HTML结构，可以通过DOM遍历找到checkbox后面的兄弟文本节点和元素，单独设置样式：

const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
allCheckboxes.forEach(checkbox => {
  if (checkbox.value === "0") {
    // 遍历checkbox之后的所有兄弟节点，直到遇到<br>标签
    let nextNode = checkbox.nextSibling;
    while (nextNode && nextNode.nodeName !== 'BR') {
      if (nextNode.nodeType === Node.ELEMENT_NODE) {
        // 处理<b>这类元素节点
        nextNode.style.color = "red";
      } else if (nextNode.nodeType === Node.TEXT_NODE && nextNode.textContent.trim()) {
        // 处理纯文本节点，用span包裹后设置颜色
        const span = document.createElement('span');
        span.style.color = "red";
        span.textContent = nextNode.textContent;
        checkbox.parentNode.insertBefore(span, nextNode);
        checkbox.parentNode.removeChild(nextNode);
        nextNode = span;
      }
      nextNode = nextNode.nextSibling;
    }
  }
});

内容的提问来源于stack exchange，提问作者Lê Phong Nguyễn