选中复选框输入时，如何在另一个元素中选择div？

Question

我有一个复选框，当它被检查以显示另一个元素内的div时（不在复选框旁边，它位于它的父元素旁边的div中）

 <nav>
   <div class='container'>
     <label class="tog" for="toggle">&#9776;</label>
     <input type="checkbox" id="toggle"></input> //This is the checkbox
   </div>
 </nav>
 <div class='container'>
   <div class='select'> // This is the div that I want to select when checkbox is checked
   </div>
 </div>

我尝试了这些选择器，但没有工作：

#toggle:checked   ~ .select{display:block}
#toggle:checked   + .select{display:block}

Answer 1

CSS中没有父选择器。 如果您可以更改HTML，请将输入移动到相同级别的nav和div的.container 。 隐藏由标签控制的输入，并使用CSS兄弟和父规则控制div display属性：

 #toggle { height: 0; overflow: hidden; padding: 0; margin: 0; } #toggle:checked + nav .tog { color: red; } #toggle:not(:checked) ~ .container > .select { display: none; } 

 <input type="checkbox" id="toggle"> <nav> <div class="container"> <label class="tog" for="toggle">&#9776;</label> </div> </nav> <div class="container"> <div class="select"> // This is the div that I want to select when checkbox is checked </div> </div> 

Answer 2

这将很容易解决您的JS问题。

var input = document.getElementById('toggle');
var select = document.querySelectorAll('.select')[0];
input.onchange = function(){
   select.style.display = this.checked? 'block': 'none';
}

Answer 3

我没试过这个，但是如果你需要根据复选框的状态显示/隐藏div，你可以尝试这个

    <nav>
        <div class='container'>
            <label class="tog" for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle"></input> //This is the checkbox
        </div>
    </nav>

<div class='container'>
    <div class='select' id="div-to-show" style="display:none">
    </div>
</div>

var check = document.getElementById('toggle');
check.addEventListener( 'click', function( event ){ 
    if( check.checked === true ){ 
        document.getElementById('div-to-show').style.display = 'block'; 
    }
    else{
        document.getElementById('div-to-show').style.display = 'none';
    }
} );

Answer 4

问题的关键部分在这里

它在一个div旁边，就在它的父母旁边

目前无法通过CSS完成此操作，因为目标需要位于同一父级中。 您可以看一下这个问题的答案，以获得更深入的解释，或者BoltClock的答案可以获得更深入的内容 。

显然，如果你想沿着这条路走下去，这可以用Javascript来完成，但听起来你想要一个CSS答案。