Amigos, boa tarde. Estou quebrando a cabeça à 2 dias por causa disso:
Tenho 2 rádio button que possui um ícone e um texto: quando seleciono um, o ícone do mesmo é substituida por um ícone mais claro (branco), assim como a cor da letra (o primeiro por JS, a segunda por CSS).
Pois bem, quando seleciono o outro radio button, queria que o ícone voltasse à cor original, ou seja, voltasse a ser vermelho.
O que eu fiz está aqui: 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>
Como poderia fazer?