带有复选框的目标 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，如果在后面，可以用来+选择相邻元素或嵌套相邻元素

演示

<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 执行操作（目标元素在哪里无关）演示 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();
    });
});