html - 带有复选框的目标 div

Question

我有一个隐藏/显示 div 的复选框。当我将复选框直接放在 div 上方时，它可以工作。当我将复选框放在页面中的其他位置时（为了更好的可用性）它不起作用。有没有办法定位某个 div 以使复选框在页面上的任何地方都有效？

这是HTML代码：

<input type="checkbox" id="toggle-result" checked="checked">  </input>

CSS：

input[type=checkbox]:checked ~ div {
   display: none;
}

Answer 1

使用 CSS，您可以选择子元素和相邻元素，因此如果将其放置在复选框之后，您尝试做的将起作用，div但如果您想让它在div其他地方（复选框上方）起作用，您需要使用JavaScript，如果是after，可以使用+选择相邻元素或嵌套相邻元素

演示

<input type="checkbox" />
<div>Toggle Using CSS</div>

input[type=checkbox]:checked + div {
    display: block;
}

div {
    display: none;
}

像这样定位div更远的地方（但不是在 之前checkbox）

演示 2

input[type=checkbox]:checked + a + .blah .target {
    display: block;
}

.target {
    display: none;
}

<input type="checkbox" />
<a href="#">Dummy Link</a>

<div class="blah">
    <div class="target">Complicated Selector, Isn't It?</div>
</div>

解释：input[type=checkbox]:checked + a + .blah .target在这里，我们选择处于选中状态的复选框，然后通过选择作为锚标签的相邻元素来链接它，然后我们选择与具有类的a 标签相邻的另一个相邻元素，并且比我们选择一个类的嵌套子元素div.blah.target

使用 jQuery 做事（不管目标元素在哪里）Demo 3

<input type="checkbox" id="checkme" />
<a href="#">Dummy Link</a>
<div id="show_on_check" style="display:none">
    This content should appear when the checkbox is checked
</div>

$(document).ready(function() {
    $('#checkme').change(function() {
        $('#show_on_check').toggle();
    });
});

Answer 2

在选择器中使用元素 ID：

<input type="checkbox" id="toggle-result" checked="checked"/>

<div id="myDiv">showme</div>

<style>
    #toggle-result:checked ~ #myDiv {
        display: none;
    }
</style>

Answer 3

input[type=checkbox]:checked ~ div {
   display: none;
}

div将选择前面有被选中的每个元素input。它可能会中断的原因是因为输入不在div（就像您在问题中所说的那样）