如何在div表

Question

我试图在toggle / div中添加输入/标签以隐藏输入列表，但似乎无法在没有复选框不工作的情况下定位它。我尝试添加div＃cars：checked~.container .cars {}但仍然没有工作。我想要的是将输入包装在一个表示例中

<div class="parkingDivTable" style="border:solid 2px black;">
<table>
<input type="checkbox"  id="all" checked> Show all<br>
<input type="checkbox" id="cars"> Cars<br>
<input type="checkbox" id="animals"> Animals<br>
<input type="checkbox"  id="fruits"> Fruits<br>
<input type="checkbox" id="color" > Colors<br>
</table>
</div>

这样的东西，但输入只能在div之外的任何建议

＆＃13;

＆＃13;

#all:checked  ~ .container .filterDiv{
  display: block;
  border:red solid 2px;
}


.filterDiv, :not(#all):checked ~ .container  .filterDiv{
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
  border:solid 2px blue;
}


#animals:checked ~ .container .animals,
#fruits:checked ~ .container .fruits,
#color:checked ~ .container .colors{
  display: block;
  
}

#cars:checked ~ .container .cars
{
  display: block;
  border:green solid 2px;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

＆＃13;

<h2>Filter DIV Elements</h2>


<input type="checkbox"  id="all" checked> Show all<br>
<input type="checkbox" id="cars"> Cars<br>
<input type="checkbox"  id="animals"> Animals<br>
<input type="checkbox"  id="fruits"  > Fruits<br>
<input type="checkbox" id="color" > Colors<br>


<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>

＆＃13;

＆＃13;

＆＃13;