I'm struggling with accessing the img tag when a specific checkbox is selected in order to add a particular class. I need help figuring out how to target the img tag.
<div class="row ">
<div class="col-md-5 col-md-offset-1 col-centered piege">
<input type="checkbox" id="piega1" class="piege servizioSection2 " name="imgSection2"value="Piega By Wella Professionals">
<label class="piega labelStylingImg " for="piega1">
<img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
</label>
<h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
</div>
<div class="col-md-5 col-centered piege">
<input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="Piega By System Professionals">
<label for="piega2" class="piega labelStylingImg">
<img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
</label>
<h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
</div>
</div>
I want to add the borderRed class to the img if the checkbox is checked. Here's my code:
$(document).ready(function() {
$(':checkbox').on('change', function (){
if ($(this).hasClass('servizioSection2')) {
if ($(this).is(':checked')){
console.log('selected');
var imgSelected = $(this).find('.immaginePiega');
} else if ($(this).prop('checked', false)) {
console.log('not selected');
};
};
})
});
Currently, I can log that it's selected but I'm having trouble accessing the img tag to apply the bordered class.