Javascript，切换同名的单选按钮图像

Question

我有一个表单，我已经用图像替换了单选按钮，当点击图像时，它们显示图像的较暗形式以显示它处于活动状态，但，当我点击不同的单选按钮图像时，我无法完全弄清楚如何让较暗的图像回到标准图像。这是我到目前为止。

$("[name=make]").on({ 
 
    "click": function() { 
 
    var val = $(this).attr('value'); 
 
    console.log("Value: " + val); 
 
    var imgName = "#" + val + "-icon"; 
 
    $(imgName).attr('src', '/images/make-icons/' + val + '-hover.png'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input id="ford" class="dis-none" type="radio" name="make" value="ford"> 
 
    <img class="make-icons" src="/images/make-icons/ford.png" id="ford-icon"> 
 
</label> 
 
<label> 
 
    <input id="chevrolet" class="dis-none" type="radio" name="make" value="chevrolet"> 
 
    <img class="make-icons" src="/images/make-icons/chevrolet.png" id="chevrolet-icon"> 
 
</label> 
 
<label> 
 
    <input id="gmc" class="dis-none" type="radio" name="make" value="gmc"> 
 
    <img class="make-icons" src="/images/make-icons/gmc.png" id="gmc-icon"> 
 
</label> 
 
<label> 
 
    <input id="dodge" class="dis-none" type="radio" name="make" value="dodge"> 
 
    <img class="make-icons" src="/images/make-icons/dodge.png" id="dodge-icon"> 
 
</label> 
 
<label> 
 
    <input id="toyota" class="dis-none" type="radio" name="make" value="toyota"> 
 
    <img class="make-icons" src="/images/make-icons/toyota.png" id="toyota-icon"> 
 
</label> 
 
<label> 
 
    <input id="nissan" class="dis-none" type="radio" name="make" value="nissan"> 
 
    <img class="make-icons" src="/images/make-icons/nissan.png" id="nissan-icon"> 
 
</label>

Answer 1

检查无线电

$("[name=make]").on({ 
    "change": function() { 
    var suffix = ''; 
    if ($(this).is(':checked')) { 
     suffix = '-hover'; 
    } 
    var val = $(this).attr('value'); 
    console.log("Value: " + val); 
    var imgName = "#" + val + "-icon"; 
    $(imgName).attr('src', '/images/make-icons/' + val + suffix + '.png'); 
    } 
});