Jquery access img in label

Question

私はこれら2つのチェックボックスを持っており、チェックボックスを選択して特定のクラスを追加すると、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

変更時には、チェックボックスIDの属性「attr」を付けてラベルを取得します。 imgは単にそれの子孫であり（同じattrを共有します）、単純な横断のように見えます。例えば

、ビット簡素化：この

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

、他に追加を追加cheked：場合

 $(':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

：あなたのケースに

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

またはより具体的にこの行

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

例えば

​​

Answer 3

使用next()このように、その後find()このクラス.labelStylingImg.active IMG を使用して、あなたのカスタムCSSを追加し、

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

だからあなたは今、この

を行うことができます

imgSelected.addClass('bordered'); 

または

imgSelected.removeClass('bordered'); 

WORKING DEMO