EDIT:
Como esta adicionando vários elementos eles não podem ter o mesmo ID, utilize a class para identifica-los, e para remover faça a busca no mesmo parent em que foi adicionado anteriormente...
$('input[type="checkbox"]').on('change', function() {
var $parent = $(this).parents('.hovereffect');
if (this.checked) {
$('.abcd', $parent).append('<img class="hea img-responsive" src="../images/heart.png">');
} else {
$('.hea', $parent).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<span class="abcd"></span>
<img id="he" class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<span class="abcd"></span>
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<span class="abcd"></span>
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>