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'); 
    } 
});