jquery输入未检查图像路径变化

Question

我不知道它是如何工作的，所以我希望你能帮助我。 我想改变我的图片的图像路径，如果输入字段未选中。 如果选中，它将路径更改为彩色图片，对我来说效果不错，但如果我选择另一张图片，则之前的图片应该变回黑白图片。

在此先感谢！

下面是HTML：

$('input[name=an_paymentOptionsControl]').on('change', function() { 
 
    $(this).siblings('img').attr('src', 'pics/payment-large/' + this.getAttribute('value') + '.png'); 
 
    console.log(this.getAttribute('value')); 
 
}); 
 

 
$('input[name=an_paymentOptionsControl]').not(':checked', function() { 
 
    $('img').attr('src', 'pics/payment-large/sw' + this.getAttribute('value') + '.png'); 
 
    console.log('nix'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="anm-payment-layout-methods"> 
 
    <label> 
 
      <input class="anm-pay-method" type="radio" value="acc" name="an_paymentOptionsControl" /> 
 
      <img class="paymentLabel" src="pics/payment-large/swacc.png"> 
 
     </label> 
 
    <label> 
 
      <input class="anm-pay-method" type="radio" value="paypal" name="an_paymentOptionsControl" /> 
 
      <img src="pics/payment-large/swpaypal.png"> 
 
     </label> 
 
    <label> 
 
      <input class="anm-pay-method" type="radio" value="sue" name="an_paymentOptionsControl" /> 
 
      <img src="pics/payment-large/swsue.png"> 
 
     </label> 
 
    <label> 
 
      <input class="anm-pay-method" type="radio" value="giropay" name="an_paymentOptionsControl" /> 
 
      <img src="pics/payment-large/swgiropay.png"> 
 
     </label> 
 
    <label> 
 
      <input class="anm-pay-method" type="radio" value="prepay" name="an_paymentOptionsControl" /> 
 
      <img src="pics/payment-large/swprepay.png"> 
 
     </label> 
 
</div>

Answer 1

更新在change事件处理图像的路径。

$('input[name=an_paymentOptionsControl]').on('change', function() { 
    $(this).siblings('img').attr('src', 'pics/payment-large/' + this.value + '.png'); 

    //Reset images 
    $('input[name=an_paymentOptionsControl]:not(:checked)').each(function() { 
     $(this).siblings('img').attr('src', 'pics/payment-large/sw' + this.value + '.png'); 
    }); 
});