JQuery доступ img внутри метки

Question

У меня эти два флажка, и я пытаюсь получить доступ к тегу img, если флажок установлен для добавления определенного класса. Я не знаю, как получить доступ к тегу img.

<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> 

Моя функция должна быть: Если этот флажок установлен, добавьте класс borderRed в img.

я писал:

$(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('non selezionata'); 
     };   
    }; 
    }) 
}); 

Я могу console.log selezionato, но не для доступа к IMG тег и добавить граничат класс к нему.

Answer 1

при изменении, получите метку attr, атрибут «для» идентификатора флажка. img - просто потомок этого (и он также имеет один и тот же attr), который выглядит как простой проход.

Например, упрощая немного:

$('#piega1').click(function(){ $('img[for=piega1]').addClass('borderRed'); });

или более конкретно к вашему случаю:

 $(':checkbox').change(function(e){ 
    var element = $('img[for='+$(e.target).attr('id')+']'); 
    if(element.hasClass('boderRed')) 
     element.removeClass('borderRed'); 
    else 
     element.addClass('borderRed'); }); 

Answer 2

если: cheked добавить

$(this).next().addClass('active'); 

и еще добавить эта линия

$(this).next().removeClass('active'); 

и добавить пользовательский CSS с помощью этого класса .labelStylingImg.active IMG Для примера

.labelStylingImg.active img{ border: 2px solid red; } 

Answer 3

Использование next() затем find() Подобно этому,

var imgSelected = $(this).next().find('.immaginePiega'); 

Таким образом, вы можете теперь сделать это

imgSelected.addClass('bordered'); 

или

imgSelected.removeClass('bordered'); 

WORKING DEMO