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，因为目标需要位于同一个父级中。您可以查看easwee's answer to this question以获得更深入的解释，或BoltClock's answer to get MUCH more in-depth。

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

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

4 个答案: