Как присвоить картинке определенный класс при нажатии?

Question

[Ambal89]

Подскажите пожалуйста, есть код, состоящий из радиокнопок с картинками. Как сделать, чтобы при нажатии на картинку (когда выделяется радиокнопка) у картинки появлялся бордер? Нашел на просторах интернета скрипт, который добавляет активному элементу допкласс (нужно чтобы тегу img добавлялся класс), но к сожалению, с яваскриптом пока не знаком, подкорректировал наобум, не сработало. Направьте, пожалуйста, падавана на путь истинный.
код:

<div class="wpcc_box wpcc_box_2" style="display: block;">
      <div class="wpcc_description">
        Выберите набор, который Вам подходит:
      </div>
      <div class="wpcc_fields wpcc_radio wpcc_radio_2">
        <label>
        <div class="images"><img src="tovar1_price.png"></div>
        <input type="radio" name="wpcc_structure[2]" value="300" checked class="wpcc_jq_action wpcc_jq_action_2" data-type="radio" data-fid="2" data-data="data"> Стартовый набор
        </label>
        ...
   </div>

и скрипт:

$('label input').on('checked', function (){
    $(this).closest('div.images img').addClass('active').siblings().removeClass('active');
});

Answer 1

[Варфаломей Изольдин]

"Как сделать, чтобы при нажатии на картинку" вот так
codepen.io/VarIzo/pen/VPKJdB
когда выделяется радиокнопка - так событие по кнопке или по картинке?

Comments

[Ambal89]

Там же вроде картинка и инпут находится в лейбле, поэтому событие по любому элементу. Вы сделали почти так, как мне нужно, только не убирается выделение с картинки, если выбираешь другую: codepen.io/anon/pen/EZgBJo

[Варфаломей Изольдин]

Можно и снять всем картинкам класс active

Answer 2

[ddd329]

Оберни каждый radio с картинкой в некий контейнер(например 'item')

<div class="item">
  <label>
    <div class="images"><img src="tovar1_price.png"></div>
    <input type="radio" name="wpcc_structure[2]" value="300" checked class="wpcc_jq_action wpcc_jq_action_2" data-type="radio" data-fid="2" data-data="data"> Стартовый набор
  </label>
</div>

<script>
  $( '.item' ).on( 'click', '.images', function( e ) {
    e.stopPropagation();
    
    var
      $item = $( e.delegateTarget ),
      $img = $( this );
    
    $item.find( 'input[type="radio"]' ).prop( 'checked', true );
    
    $img.addClass( 'active' );
    
  });
  
  $( '.item' ).on( 'change', 'input[type="radio"]', function( e ) {
    e.stopPropagation();
    
    var
      $item = $( e.delegateTarget ),
      $img = $item.find( '.images' ),
      checked = $( this ).prop( 'checked' );
      
    if( checked ){
      $img.removeClass( 'active' );
    }
    else {
      $img.addClass( 'active' );
    }
    
  });
</script>