I need to hide an SVG graphic and display an icon using an invisible checkbox to handle the event. The problem arises when all checkboxes are selected upon firing the onchange event, causing all icons to appear and inputs to be selected.
Is there a way to set the event handler individually for each input[type="checkbox"]?
var $checkbox = $('.form-control'),
$iconCheck = $('.check-circle'),
$imgSVG = $('.img');
$($checkbox).on('change', function() {
if ($(this).is(':checked')) {
$iconCheck.removeClass('d-none');
$imgSVG.addClass('d-none');
} else {
$iconCheck.addClass('d-none');
$imgSVG.removeClass('d-none');
}
});img {
display: block;
width: 40px;
height: 40px;
}
.d-none {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<figure>
<img class="img" src="https://cdn3.iconfinder.com/data/icons/halloween-29/64/ghost-512.png" alt="">
<i class="check-circle d-none">CHECKED!</i>
</figure>
<label for="checkboxTerror">Terror</label>
<input id="checkboxTerror" type="checkbox" class="form-control">
</div>
<div class="card">
<figure>
<img class="img" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Cinema-Comedy-2-icon.png" alt="">
<i class="check-circle d-none">CHECKED!</i>
</figure>
<label for="checkboxTerror">Comedy</label>
<input id="checkboxTerror" type="checkbox" class="form-control">
</div>Screenshot Example