Javascript filtering content on checkbox value

I have code like this

<div id="filter">

</div>
<div id="items">
  <div class="item">
    <h2>Orange</h2>
    <img src="orange.png" alt="" />
  </div>
  <div class="item">
    <h2>Banana</h2>
    <img src="banana.png" alt="" />
  </div>
</div>

I would like to filter divs with class "item" on its childs img src values. For example, If I checked input witch value banana.png only .item with same img src value should be displayed. Rest must be hidden.

And if you uncheck checkbox, control should be make again - items that were hided by checking that checkobox should be displayed again.

I have got same code that creates proper checkboxes, but how to make rest?

$("#items > div").find("img").each(function () {
  var value = $(this).attr("src");

  $("#filter").append('<label><input type="checkbox" [value="' + value + '"]>' + value + '</label>');

  var toFilter = $("#items > div").find("img");


});

You can see my codepen as well http://ift.tt/1t7eLnS