Make input radio change image when one clicks on each of them

Question

I have a group of radio buttons that set to show image instead of normal radio button. I want to change the image when each of them are checked. I wrote the jQuery and it works but it doesn't return to normal if its not checked.

So in this case my second image will remain active even after I select another radio button which is suppose to be hidden if radio input is not checked.

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

Swati · Answer 1 · 2021-06-12T06:13:41.360

You can loop through radios which are not checked then hide your filled img from there and show empty image.

Demo Code:

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

Make input radio change image when one clicks on each of them

1 Answers1