当单击它们中的每一个时制作输入单选更改图像

Question

我有一组单选按钮设置为显示图像而不是普通单选按钮。 我想在检查每个图像时更改图像。我写了 jQuery，它可以工作，但如果不检查它就不会恢复正常。

所以在这种情况下，即使我选择了另一个单选按钮，如果未选中单选输入，我的第二个图像仍将保持活动状态。

$(document).ready(function() {
  $('.question input[type="radio"]').each(function() {
    $(this).click(function() {
      if ($(this).is(':checked')) {
        //$(this).find('.empty').css("opacity", "0");
        //$(this).find('.filled').css("opacity", "1");
        $(this).parent('.question').find('.empty').css("opacity", "0");
        $(this).parent('.question').find('.filled').css("opacity", "1");
      } else {
        //$(this).find('.empty').css("opacity", "1");
        //$(this).find('.filled').css("opacity", "0");
        $(this).parent('.question').find('.empty').css("opacity", "1");
        $(this).parent('.question').find('.filled').css("opacity", "0");
      }
    });
  });
});

input[type=radio] {
  position: absolute;
  opacity: 0;
  max-width: 300px;
  max-height: 90px;
  width: 300px !important;
  height: 90px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}


/* IMAGE STYLES */
.question img.empty {
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s;
  position: absolute;
  left: 0;
}

.question img.filled {
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  position: absolute;
  left: 0;
}

<div class="col-md-6 col-sm-12 d-flex align-items-center">
  <div class="form-group" style="columns:2">
    <label class="radio question">
      <input type="radio" name="s1" value="0">
      <img src="resources/img/qs/a1.png" class="img-fluid empty">
      <img src="resources/img/qs/a1-f.png" class="img-fluid filled">
    </label>
    <label class="radio question">
      <input type="radio" name="s1" value="1">
            <img src="resources/img/qs/b1.png" class="img-fluid empty">
      <img src="resources/img/qs/b1-f.png" class="img-fluid filled">
        </label>
    <label class="radio question">
          <input type="radio" name="s1" value="2">
            <img src="resources/img/qs/c1.png" class="img-fluid empty">
            <img src="resources/img/qs/c1-f.png" class="img-fluid filled">
            </label>
    <label class="radio question">
        <input type="radio" name="s1" value="3">
            <img src="resources/img/qs/d1.png" class="img-fluid empty">
            <img src="resources/img/qs/d1-f.png" class="img-fluid filled">
            </label>
    <label class="radio question">
            <input type="radio" name="s1" value="4">
            <img src="resources/img/qs/e1.png" class="img-fluid empty">
      <img src="resources/img/qs/e1-f.png" class="img-fluid filled">
        </label>
  </div>
</div>

Answer 1

您可以遍历不是checked 的收音机，然后从那里隐藏您的filled img 并显示empty 图像。

演示代码：

$(document).ready(function() {
  $('.question input[type="radio"]').click(function() {
    //the one which is checked...
    $(this).parent('.question').find('.empty').css("opacity", "0");
    $(this).parent('.question').find('.filled').css("opacity", "1");
    //loop through all radio which not checked..change there img
    $('.question input[type="radio"]').not(":checked").each(function() {
      $(this).parent('.question').find('.empty').css("opacity", "1");
      $(this).parent('.question').find('.filled').css("opacity", "0");
    })
    //without each...
    /*var selector = $('.question input[type="radio"]:not(:checked)').parent('.question')
      selector.find('.empty').css("opacity", "1");
       selector.find('.filled').css("opacity", "0");*/
  });
});

.question img.empty {
  cursor: pointer;
  opacity: 1;
}

.question img.filled {
  cursor: pointer;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-12 d-flex align-items-center">
  <div class="form-group" style="columns:2">
    <label class="radio question">
    <input type="radio" name="s1" value="0" >
    <img src="resources/img/qs/a1.png" class="img-fluid empty">
    <img src="resources/img/qs/a1-f.png" class="img-fluid filled">
        </label>
    <label class="radio question">
        <input type="radio" name="s1" value="1" >
        <img src="resources/img/qs/b1.png" class="img-fluid empty">
            <img src="resources/img/qs/b1-f.png" class="img-fluid filled">
        </label>
    <label class="radio question">
        <input type="radio" name="s1" value="2" >
        <img src="resources/img/qs/c1.png" class="img-fluid empty">
        <img src="resources/img/qs/c1-f.png" class="img-fluid filled">
        </label>
    <label class="radio question">
        <input type="radio" name="s1" value="3" >
        <img src="resources/img/qs/d1.png" class="img-fluid empty">
        <img src="resources/img/qs/d1-f.png" class="img-fluid filled">
        </label>
    <label class="radio question">
    <input type="radio" name="s1" value="4" >
        <img src="resources/img/qs/e1.png" class="img-fluid empty">
        <img src="resources/img/qs/e1-f.png" class="img-fluid filled">
    </label>
  </div>
</div>