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

}）;

以下是代码的fiddle

Answer 1

首先，您没有将jQuery添加到您的小提琴项目中。此外，您要应用img更改的src元素的引用也是不正确的。其次，你没有提供其他＆＃39;其他＆＃39;小提琴里面的单选按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

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）

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

4 个答案: