javascript - 使用 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 />

Answer 1

您可以使用 General sibling combinator ~ :

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