图像隐藏在复选框上

Question

选中开始复选框，图像如下所示。如果未选中复选框，则隐藏图像，如果再次选中复选框，则会再次显示图像。

<form action=""> 
 <div> 
  <input type="checkbox" checked="checked" /> House <br /> 
  <input type="checkbox" checked="checked" /> Car <br /> 
  <input type="checkbox" checked="checked" /> Tree <br /> 
  </div> 
</form> 
<p> 
 <img src="house.jpg" alt="House" /> 
 <img src="car.jpg" alt="Car" /> 
 <img src="tree.jpg" alt="Tree" /> 
</p> <script type="text/javascript"> 
<!-- function selectImage(checkbox) { var counter = 0 for (var i = 0; i < checkbox.length; ++i) { if (checkbox[i].checked) ++stevec } return counter } 
//--> </script>

Answer 1

input[type="checkbox"] ~ img { display: none; }
input[type="checkbox"]:checked ~ img { display: inline; }

Demo