Jquery - 隱藏單選按鈕 - 但使圖像可點擊以顯示更大的圖像

Question

我當前的 HTML 看起來像這樣（我無法控制作為其 SAAS 的 HTML，所以我只能添加 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 點，只需更改click()事件處理程序中<img>的src屬性

這是一個工作片段，請注意我添加了圖像：

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