使用HTML/CSS如何通过复选框显示/隐藏特定的Div？

Question

我正在尝试找到一种方法，将特定的复选框与显示/隐藏特定 div 元素相关联。

我能够找到一些代码，用于复选框显示/隐藏它们直接下方的 Div 元素，但我想知道是否有一种方法可以将特定的复选框链接到我选择的任何 div。

在我的代码中，我基本上正在尝试弄清楚如何使 [cb1] 或 [cb2] 切换（显示/隐藏）"divMenu3"。

我在各种论坛中找到了几篇帖子，基本上说我需要 Javascript 才能实现这一点，但是在 HTML/CSS 中没有简单的方法吗？

我是一个完全的初学者。
任何建议都会非常感激！

完整代码：https://pastebin.com/vg1TS171

CSS：

    input:checked + #divMenu1 {
        display: none;
    }

    input:checked + #divMenu2 {
        display: none;
    }

    input:checked + #divMenu3 {
        display: none;
    }

HTML:

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1>

<div id="divMenu1">
    This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2>

<div id="divMenu2">
    This is divMenu2.
</div>

<hr />


<!--Third Menu-->
<div id="divMenu3">
    This is divMenu3.
</div>

<hr />

- RANDROID

---

说实话，我也不太清楚它是如何工作的，但我假设在CSS中，divMenu项与其前面可以立即检查的某些内容相关联。我在网上找到了这段代码的结构，并一直在尝试摸索弄明白它。 - RANDROID

Answer 1

你可以使用一般同级组合器 ~，具体用法请参考Mozilla开发者文档。

input:checked+#divMenu1 {
  display: none;
}

input:checked+#divMenu2 {
  display: none;
}


/** check both to show divMenu3 **/

#cb1:not(:checked)~#divMenu3,
#cb2:not(:checked)~#divMenu3 {
  display: none;
}

<!--First Menu-->
<label for="cb1">[cb1]</label>
<input type="checkbox" style="display: none" id="cb1">

<div id="divMenu1">
  This is divMenu1.
</div>

<hr />

<!--Second Menu-->
<label for="cb2">[cb2]</label>
<input type="checkbox" style="display: none" id="cb2">

<div id="divMenu2">
  This is divMenu2.
</div>

<hr />

<!--Third Menu-->
<div id="divMenu3">
  This is divMenu3.
</div>

<hr />

- Ori Drori

---

酷 :) 我从未想过这可以在纯CSS + HTML中完成 :) 这种方法有什么缺点吗？ - Icepickle

它们必须处于同一级别 - 如果您使用div包装输入，则无法正常工作，但这也是相邻兄弟选择器（+）的问题。 - Ori Drori

哦，我的天啊，非常感谢你！！<3 - RANDROID

Answer 2

这是 JavaScript 的解决方案：

function toggle(id) {
  var ele = document.getElementById(id);
  if (ele)
    ele.style.display = ele.style.display === "none" ? "initial" : "none";
}

input:checked+#divMenu1 {
  display: none;
}

input:checked+#divMenu2 {
  display: none;
}

input:checked+#divMenu3 {
  display: none;
}

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1 onclick="toggle('divMenu3')">

<div id="divMenu1">
  This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2 onclick="toggle('divMenu3')">

<div id="divMenu2">
  This is divMenu2.
</div>

<hr />

<!--Third Menu-->
<div id="divMenu3">
  This is divMenu3.
</div>

<hr />

- Sebastian Speitel