ラジオボタンがチェックされたときに画像を切り替えると、未チェックjqueryの

Question

私はlabelが変わる内のラジオボタンが画像をクリックすると、この

<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> 

のように画像内にラップラジオボタンを持っています。私はこれまでにしてきました。ここで問題となるのは、ラジオボタンをクリックした後、画像が完全に変更されますが、他のラジオボタンがクリックされるとデフォルト画像に戻りません。これによってチェックされていないラジオもチェックされているように見えます。私は2つの画像を持っています.1つはラジオチェック、もう1つはラジオチェックです。

$('.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"); 
} 

}）;ここで

はあなたのフィドルプロジェクトにjQueryを追加しなかったすべてのコード

Answer 1

まずのfiddleです。 srcの変更を適用するimg要素への参照も不適切でした。第二に、あなたはフィドルの中に「他の」ラジオボタンを用意していませんでした。

$('#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

私の提案は次のとおりです。

• 使用.closest（」月刊ラジオ-DIV。 "）の代わりに.parentsの（" 月刊ラジオ-DIV：EQチェックする」）
• スワップ画像

012：（0） "）

使用は（この）（.is $の代わりにthis.checked"

スニペット：

$('.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

それがクリックされないラジオの変更をリッスンしていないので、文が真であれば毎回あなた、
はあなたが戻ってあなたのイメージを変更する必要があります手動でデフォルトにして、クリックしたラジオの横にある画像を更新してください
try：
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"); }

（あなたがelse文を削除することができます）

Answer 4

しかし、あなたはCSSでより簡単にそれを行うことができます：
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"); }
（あなたはjQueryを使ってそれをしなければならない場合を除き）