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

我的jquery

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

Answer 1

对于第 1 点:您可以只使用 CSS 来完成，或者如果您可以使用 CSS，也可以使用 jQuery 来完成

对于第 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>