0

At the start checkboxes are checked and images are shown below. When checkbox in not selected the image hides, if checkbox is selected again the image is shows again.

<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>
ale
  • 10,012
  • 5
  • 40
  • 49
user3507447
  • 3
  • 2
  • House
    Car
    Tree

    House Car Tree

    – user3507447 Apr 07 '14 at 15:55
  • You should add more detail, what have you tried etc. [This Stack Overflow Guide](http://stackoverflow.com/questions/how-to-ask) will also probably be a great help for future questions. The code in [this question](http://stackoverflow.com/questions/5539139/change-get-check-state-of-checkbox) includes adding functionality to the `onclick` event, this should be sufficient for what you need to do. – talegna Apr 07 '14 at 15:56
  • Please include your code **in your question** – George Apr 07 '14 at 15:56

1 Answers1

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

Demo

Oriol
  • 274,082
  • 63
  • 437
  • 513