Javascript 使用HTML/CSS复选框显示/隐藏特定Div

我正在试图找到一种方法来链接一个特定的复选框，以显示/隐藏一个特定的div元素

我能够找到复选框的代码，这些复选框显示/隐藏位于它们正下方的Div元素，但我想知道是否有办法将特定复选框链接到我选择的任何Div

在我的代码中，我基本上是想弄清楚如何使[cb1]或[cb2]切换show/hide divMenu3

我在不同的论坛上发现了一些帖子，基本上说我需要Javascript来实现这一点，但是仅仅用HTML/CSS真的没有简单的方法来实现吗

我完全是个初学者。 任何建议都将不胜感激

完整代码：

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 />

您可以使用：

输入：选中+divMenu1{ 显示：无； } 输入：选中+divMenu2{ 显示：无； } /**选中两者以显示divMenu3**/ cb1:未选中~divMenu3， cb2:未选中~divMenu3{ 显示：无； } [cb1] 这是divMenu1。 [cb2] 这是divMenu2。 这是divMenu3。

---

这就是JavaScript解决方案：

函数切换ID{ var ele=document.getElementByIdid； 如果元素 ele.style.display=ele.style.display==none？首字母：none； } 输入：选中+divMenu1{ 显示：无； } 输入：选中+divMenu2{ 显示：无； } 输入：选中+divMenu3{ 显示：无； } [cb1] 这是divMenu1。 [cb2] 这是divMenu2。 这是divMenu3。

---

@说实话，我也不知道它是如何工作的，但是我假设，在CSS中，divMenu项链接到可以在它前面检查的东西。我在网上找到了这段代码的结构，我一直在胡思乱想，试图找出它。酷：我从来没有想过它可以在简单的css+html中完成：这种方法有任何缺点吗？它们必须在同一个级别上-如果你用div包装输入，它将不起作用，但这也是相邻兄弟姐妹选择器+的问题。哦，我的上帝，非常感谢你！！