如何根据选择的单选按钮交换显示的图像？

Question

I have a bunch of column groups (col-md-4), each containing two absolutely positioned images on top of each other within a div. I need to switch the visible image within a group by changing its opacity from 0 to 1 based on which radio button is checked. Is there a way to do this with jquery?

<div class="row">
  <div class="col-md-4">
    <div class="slide-swapper">
      <img src="images/gray.jpg" class="img-fluid gray" height="360" width="360" alt="gray">
      <img src="images/silver.jpg" class="img-fluid silver" height="360" width="360" alt="silver">
    </div> 
    <div class="color-group">
      <input id="input-1" type="radio" checked="checked" name="change-image">
      <label for="input-1" title="gray">Gray</label>
      <input id="input-2" type="radio" name="change-image">
      <label for="input-2" title="silver">Silver</label>
    </div>
  </div>  
</div>
<style>
    .slide-swapper {
        position: relative;
        height: 360px;
        margin-bottom: 30px;
    }
    img {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

Answer 1

My suggestion:

 img { position: absolute; top: 0; left: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .color-group { padding-top: 160px; } #input-1:checked ~ .blue { opacity: 0; } #input-2:checked ~ .pink { opacity: 0; } 

 <div class="color-group"> <input id="input-1" type="radio" checked="checked" name="change-image"> <label for="input-1" title="gray">Pink</label> <input id="input-2" type="radio" name="change-image"> <label for="input-2" title="silver">Blue</label> <img class="pink" src="http://placehold.it/360x150/ffbbdd" height="150" width="360" alt="Pink"> <img class="blue" src="http://placehold.it/360x150/9acef9" height="150" width="360" alt="Blue"> </div> 

jQuery Solution (as requested):

 $(document).ready(function() { $(".color-group input").change(function() { $(this).parent().prev().children("img:nth-of-type(2)").fadeToggle("slow"); }); }); 

  .slide-swapper { position: relative; height: 150px; margin-bottom: 30px; } img { position: absolute; top: 0; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-4"> <div class="slide-swapper"> <img src="https://placehold.it/360x150/ffbbdd" class="img-fluid gray" height="150" width="360" alt="gray"> <img src="https://placehold.it/360x150/9acef9" class="img-fluid silver" height="150" width="360" alt="silver"> </div> <div class="color-group"> <input id="input-1" type="radio" checked="checked" name="change-image"> <label for="input-1" title="gray">Gray</label> <input id="input-2" type="radio" name="change-image"> <label for="input-2" title="silver">Silver</label> </div> </div> </div> 

Answer 2

just add value attribute to each one of your input radios, and use this script :D hope this help

HTML

add value="gray" and value="silver"

    <div class="color-group">
      <input id="input-1" type="radio" checked="checked" name="change-image" value="gray" checked>
      <label for="input-1" title="gray">Gray</label>
      <input id="input-2" type="radio" name="change-image" value="silver">
      <label for="input-2" title="silver">Silver</label>
    </div>

You may add css opacity:0 to img silver for initialization

<img src="images/silver.jpg" class="img-fluid silver" height="360" width="360" alt="silver" style="opacity:0">

and input radio gray to checked

<input id="input-1" type="radio" checked="checked" name="change-image" value="gray" checked>

JQuery

<script>
$(window).on('load',function() {
    $('input[name=change-image]').on('change',function() {
        $('img[alt='+$(this).val()+']').fadeTo(400,1.0).siblings().fadeTo(400,0.0);
    });
});
</script>

Good luck.