Jquery - Скрыть радио кнопки - Но сделать изображение кликабельным, чтобы показать увеличенное изображение

Question

Мой ток HTML выглядит так (у меня нет контроля над HTML как его SAAS, поэтому я могу добавить только Jquery)

Я пытаюсь сделать что-то вроде следующего изображения. Проблема в том, как
(1) скрыть кнопки скрытия от дисплея (но это должно быть на заднем плане, то есть мне нужно знать, какое изображение было выбрано в форме).
(2) Как передать имя изображения в <div class="Show-which-image-is-selected-here"> и изменить источник этого изображения.

Вот HTML

<div class="col-sm-8">
              <div id="input-option257">               
              <div class="radio">
                  <label>
                    <input type="radio" name="option[257]" value="133">
                     <img src="black-50x50.JPG" alt="Black " class="img-thumbnail">                   
                    Black
                     </label>
                </div>
                                <div class="radio">
                  <label>
                    <input type="radio" name="option[257]" value="141">
                     <img src="white-50x50.jpg" alt="White " class="img-thumbnail">                   
                    White
                     </label>
                </div>
                                <div class="radio">
                  <label>
                    <input type="radio" name="option[257]" value="136">
                     <img src="light%20grey-50x50.JPG" alt="Light Gray " class="img-thumbnail">                   
                    Light Gray
                     </label>
                </div>

                 </div>
            </div>

            <div class="Show-which-image-is-selected-here">
            <img src="<BIGIMAGE-black-50x50.JPG" alt="Black " class="img-thumbnail">        
            </div>

My jquery

$('#input-option257').parent().hide();

Answer 1

Для точки 1: вы можете просто сделать это с помощью CSS или вы также можете сделать это в jQuery, если вы можете использовать CSS

для точки номер 2, просто измените атрибут src для <img> внутри обработчика событий click()

Это рабочий фрагмент, обратите внимание, что я добавил изображения:

$(document).ready(function() {
  // $("input[type='radio']").style({display:none})
  $("img").click(function() {
    $(this)
      .parent()
      .find("input[type='radio']")
      .prop("checked", true);
    $(".Show-which-image-is-selected-here img").attr(
      "src",
      $(this).attr("src")
    );
  });
});

input[type='radio'] {
 display: none;
}

<div class="col-sm-8">
    <div id="input-option257">
        <div class="radio">
            <label>
                <input type="radio" name="option[257]" value="133">
                <img src="https://via.placeholder.com/100x100?text=image+1" alt="Black " class="img-thumbnail"> Black
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="option[257]" value="141">
                <img src="https://via.placeholder.com/100x100?text=image+2" alt="White " class="img-thumbnail"> White
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="option[257]" value="136">
                <img src="https://via.placeholder.com/100x100?text=image+3" alt="Light Gray " class="img-thumbnail"> Light Gray
            </label>
        </div>

    </div>
</div>

<div class="Show-which-image-is-selected-here">
    <img src="https://via.placeholder.com/100x100?text=image+3" alt="Black " class="img-thumbnail">
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>