Bilder Makeln, wenn das Optionsfeld aktiviert ist und unkontrolliert jquery

Question

Ich habe Radio-Buttons im Inneren Bilder wie dieses

gewickelt

<div class = " monthly-radio-div padding-lr-zero radio-inline"> 
    <input type="radio" name="inv_type" id="monthly" value = "monthly" > 
    <label for="monthly"> 
    <span class="radio"> 
    <img src="icons/r_dis.png"> 
    </span> 
    </label> 
</div> 

<div class = " future-radio-div padding-lr-zero radio-inline"> 
    <input type="radio" name="inv_type" id="future" value = "future" > 
    <label for="future"> 
    <span class="radio"> 
    <img src="icons/r_dis.png"> 
    </span> 
    </label> 
</div> 

Wenn das Optionsfeld Bild geklickt wird innerhalb der label wird sich ändern. Ich habe bis dahin getan. Das Problem besteht darin, dass nach dem Klicken auf den Radioknopf das Bild sich perfekt ändert, aber nicht zu seinem Standardbild zurückkehrt, wenn auf einen anderen Radioknopf geklickt wird. Dadurch sieht das ungeprüfte Radio auch so aus, als wären sie überprüft. Ich habe zwei Bilder, eines stellt Radio überprüft und andere für Radio überprüft.

$('.monthly-radio-div input').on('change', function() { 
var parentDiv=$(this).parents(".monthly-radio-div:eq(0)"); 
if($(this).is(":checked")){ 
    $(parentDiv).find("img").attr("src","https://cdn1.iconfinder.com/data/icons/toggle/512/radio-on-128.png"); 
} 
else{ 
$(parentDiv).find("img").attr("src","https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"); 
} 

});

Hier ist die fiddle des Codes

Answer 1

allererst Sie nicht jQuery in Ihre Geige Projekt nicht hinzugefügt. Auch der Verweis auf das Element img, auf das Sie die Änderungen src anwenden möchten, war nicht korrekt. Zweitens haben Sie den "anderen" Radioknopf nicht innerhalb der Geige bereitgestellt.

$('#monthly, #future').on('change', function() { 
 
    if ($('#monthly').is(":checked")) { 
 
    $('.radio').find(".first").attr("src", "https://cdn1.iconfinder.com/data/icons/toggle/512/radio-on-128.png"); 
 
    $('.radio').find(".second").attr("src", "https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"); 
 
    } else { 
 
    $('.radio').find(".first").attr("src", "https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"); 
 
    $('.radio').find(".second").attr("src", "https://cdn1.iconfinder.com/data/icons/toggle/512/radio-on-128.png"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=" monthly-radio-div padding-lr-zero radio-inline"> 
 
    <input type="radio" name="inv_type" id="monthly" value="monthly"> 
 
    <label for="monthly"> 
 
     <span class="radio"> 
 
     <img class='first' src="https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"> 
 
     </span> 
 
    </label> 
 
</div> 
 

 
<div class=" monthly-radio-div padding-lr-zero radio-inline"> 
 
    <input type="radio" name="inv_type" id="future" value="monthly"> 
 
    <label for="future"> 
 
     <span class="radio"> 
 
     <img class='second' src="https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"> 
 
     </span> 
 
    </label> 
 
</div>

Answer 2

Mein Vorschlag ist:

• Verwendung .closest (“monatliche-radio-div. ") Statt .parents (" monatliche-radio-div. Eq (0) ")
• Verwendung this.checked statt $ (this) .ist (": checked ")
• Swap-Bilder

Das Snippet:

$('.monthly-radio-div :radio').on('change', function(e) { 
 
    var parentDiv = $(this).closest(".monthly-radio-div"); 
 

 
    var currImg = parentDiv.find("img").attr("src"); 
 
    var otherImg = parentDiv.siblings(".monthly-radio-div").find("img").attr("src"); 
 

 
    if (currImg == otherImg) { 
 
     otherImg = "https://cdn1.iconfinder.com/data/icons/toggle/512/radio-on-128.png"; 
 
    } 
 

 
    parentDiv.find("img").attr("src", otherImg); 
 
    parentDiv.siblings(".monthly-radio-div").find("img").attr("src", currImg); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class = "monthly-radio-div padding-lr-zero radio-inline"> 
 
    <input type="radio" name="inv_type" id="monthly" value = "monthly" > 
 
    <label for="monthly"> 
 
     <span class="radio"> 
 
     <img src="https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"> 
 
     </span> 
 
    </label> 
 
</div> 
 

 
<div class = "monthly-radio-div padding-lr-zero radio-inline"> 
 
    <input type="radio" name="inv_type" id="future" value = "monthly" > 
 
    <label for="future"> 
 
     <span class="radio"> 
 
     <img src="https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"> 
 
     </span> 
 
    </label> 
 
</div>

Answer 3

es ist nicht im Radio für die Änderung zu hören, die nicht angeklickt wird, so jedes Mal Ihre if-Anweisung wahr ist,
Sie haben Ihre Bilder ändern manuell aktualisieren Sie dann das Bild neben dem Radio geklickt
try auf Standard:
if($(this).is(":checked")){ $('.monthly-radio-div img').attr("src","https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png");
$(parentDiv).find("img").attr("src","https://cdn1.iconfinder.com/data/icons/toggle/512/radio-on-128.png"); }

(Sie können die else Anweisung entfernen)

Answer 4

jedoch können Sie es einfacher mit CSS tun:
input[type="radio"] + label span img{ background: url("https://cdn1.iconfinder.com/data/icons/toggle/512/radio-off-128.png"); } input[type="radio"]:checked + label span img{ background: url("https://cdn1.iconfinder.com/data/icons/toggle/512/radio-on-128.png"); }
(Es sei denn, Sie es mit jQuery zu tun haben)