复选框选中关联文本显示的JavaScript代码问题求助

你的问题出在判断顺序和逻辑覆盖上：当两个复选框都选中时，你先在第一个if块里隐藏了text2和text3，但后面的两个独立if判断又会因为myCheck和myCheck1处于选中状态，重新把这两个文本设置为显示，导致最终三个文本都出现。

修正后的代码 #

<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck" onclick="myFunction()">

<label for="myCheck1">Checkbox2:</label> 
<input type="checkbox" id="myCheck1" onclick="myFunction()">

<p id="text" style="display:none"> both</p>
<p id="text2" style="display:none">ch1!</p>
<p id="text3" style="display:none">ch2!</p>

<script>
function myFunction() {
  const checkBox = document.getElementById("myCheck");
  const checkBox1 = document.getElementById("myCheck1");
  const text = document.getElementById("text");
  const text2 = document.getElementById("text2");
  const text3 = document.getElementById("text3");

  // 先判断全选情况，优先级最高
  if (checkBox.checked && checkBox1.checked) {
    text.style.display = "block";
    text2.style.display = "none";
    text3.style.display = "none";
  } 
  // 只选第一个复选框
  else if (checkBox.checked) {
    text2.style.display = "block";
    text.style.display = "none";
    text3.style.display = "none";
  } 
  // 只选第二个复选框
  else if (checkBox1.checked) {
    text3.style.display = "block";
    text.style.display = "none";
    text2.style.display = "none";
  } 
  // 都不选
  else {
    text.style.display = "none";
    text2.style.display = "none";
    text3.style.display = "none";
  }
}
</script>
</body>
</html>

关键改进点 #

1. 统一获取DOM元素：避免直接使用id全局变量，通过getElementById明确获取所有需要操作的元素，代码更规范且不易出错。
2. 调整判断逻辑顺序：把全选的判断放在最前面，用else if串联后续判断，确保只有一个分支会被执行，不会出现逻辑覆盖的问题。
3. 每个分支明确所有文本的显示状态：不管进入哪个分支，都明确设置三个文本的显示/隐藏，避免遗漏导致的异常。

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