无需JavaScript用Checkbox实现文本显隐失败，求解决方法

你的代码存在两个核心问题导致功能失效，以下是具体修复思路和代码：

问题分析 #

1. CSS选择器逻辑错误：#expand:checked .checkbox 是查找选中状态下#expand的后代元素，但你要显示的div是#expand的兄弟元素，并非后代，因此这个选择器无法命中目标元素。
2. 类名冲突+初始隐藏范围错误：你给checkbox输入框和内容容器都用了checkbox类，容易造成选择器歧义；同时初始隐藏的是div div p，但直接隐藏整个内容容器才是更合理的逻辑。

修复后的代码 #

方案1：更换类名（推荐，代码更清晰） #

HTML代码

<fieldset>
  <div>Pincha para recibir información:
    <input type="checkbox" id="expand" value="yes">
    <div class="content-wrap">
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
    </div>
  </div>
</fieldset>

CSS代码

/* 默认隐藏内容容器 */
.content-wrap {
  display: none;
}

/* 当#expand被勾选时，显示紧邻的内容容器 */
#expand:checked + .content-wrap {
  display: block;
}

方案2：不修改类名，调整选择器 #

如果不想改动HTML类名，可以通过更精准的选择器区分元素：

CSS代码

/* 默认隐藏div类型的.checkbox元素，不影响input控件 */
div.checkbox {
  display: none;
}

/* 选中#expand后，显示紧邻的div.checkbox */
#expand:checked + div.checkbox {
  display: block;
}

关键知识点说明 #

• 相邻兄弟选择器+：用于选中紧跟在指定元素之后的第一个兄弟元素，完美匹配你“勾选checkbox后显示后续内容”的结构需求。
• 类名语义化：给内容容器使用content-wrap这类语义化类名，避免和表单控件的类名冲突，提升代码可维护性。

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