选中和取消选中单选按钮时切换图像

Question

我在这样的图像中包裹了单选按钮

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

单击单选按钮时， label内的图像将更改。 我已经做完了。 这里的问题是，单击单选按钮后，图像变化完美，但是单击其他单选按钮时，图像不会返回其默认图像。 这样，未选中的无线电也看起来像已选中。 我有两张图片，一张代表选中的收音机，另一张代表选中的收音机。

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

}）;

这是代码的小提琴

Answer 1

首先，您没有将jQuery添加到您的小提琴项目中。 另外，您要对其应用src更改的img元素的引用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（“。monthly-radio-div”）而不是.parents（“。monthly-radio-div：eq（0）”）
• 使用this.checked代替$（this）.is（“：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

它不是在听广播中未被点击的更改，因此每次if语句为真时，
您必须手动将图像更改回默认设置，然后更新单击的收音机旁边的图像
尝试：
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）