Skip to main content
2 de 2
adicionou 1221 caracteres ao conteúdo

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>