Return the original radio button image when selecting another

Question

Friends, good afternoon. I’ve been racking my brain for 2 days because of this:

I have 2 radio button that has an icon and a text: when I select one, the icon is replaced by a lighter icon (white), as well as the color of the letter (the first by JS, the second by CSS).

Well, when I select the other radio button, I wanted the icon to return to its original color, that is, to red again.

What I did is here: https://jsfiddle.net/guilhermelirio85/8bz41ehr/

$('.radio_item').click('label', changeImage);

function changeImage(evt) {

  var imageId = evt.target.id;

  switch (imageId) {
    case 'radio1':
      $('#img-radio1').attr("src", "http://www.blocodochapolin.com.br/michel/icon_acessorios.png");
      break;
    case 'radio2':
      $('#img-radio2').attr("src", "http://www.blocodochapolin.com.br/michel/icon_agro.png");
  }
}

.radio_item {
  display: none !important;
}

.label_item {
  background: url("http://www.blocodochapolin.com.br/michel/icon_acessorios.png")
}

.radio_item:checked+label {
  background-color: red;
  border-radius: 50px;
  padding-left: 5px;
  padding-right: 5px;
  color: white;
  height: 27px
}

label {
  cursor: pointer;
}

img {
  margin-bottom: -10px
}

span {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1"> <img id="img-radio1" width='30' height="30" src="http://www.blocodochapolin.com.br/michel/icon_acessorios2.png" /> <span>Acessórios</span></label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2"> <img id="img-radio2" width='30' height="30" src="http://www.blocodochapolin.com.br/michel/icon_agro2.png" /> Agro</label>

How could I?

Answer 1

To solve using javascript code, you would need to store the value previously selected, and return the original value at the beginning of the function.

However, since you already have css, including selector based selection: .radio_item:checked+label, you can build on that.

Example, create a class imgForUnchecked to be the image displayed when the selected radio is not selected and a class imgForChecked to be the image shown when the radio is selected:

   <input type="radio" class="radio_item" value="" name="item" id="radio1" />
   <label class="label_item" for="radio1">
     <img width='30' height="30" class="imgForUnchecked" src="http://www.blocodochapolin.com.br/michel/icon_acessorios2.png" />
     <img width='30' height="30" class="imgForChecked" src="http://www.blocodochapolin.com.br/michel/icon_acessorios.png" />
     <span>Acessórios</span>
   </label>

So we can do through CSS, hide the imgForUnchekedwhen the radio is selected:

.radio_item:checked+label>img.imgForUnchecked {
    display: none;
}

And hide the imgForChecked when the radio is not selected.

.radio_item:not(:checked)+label>img.imgForChecked {
   display: none;
}

Demo, edited from the original: https://jsfiddle.net/renatomariscal/soz5ymwd/