-6

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?

5
  • Não entendi a pergunta. Commented 20/10/2019 às 14:06
  • @Taffarel Xavier desculpe. Melhorei a pergunta, veja se ficou mais claro. Commented 20/10/2019 às 17:44
  • 1
    Acho que pela avaliação a opção de responder esta pergunta está desabilitada, porém eu entendi a pergunta. Eu recomendaria você fazer completamente por CSS, aqui está o jsfiddle editado desta forma: jsfiddle.net/renatomariscal/soz5ymwd
    – Renato
    Commented 21/10/2019 às 5:52
  • Seria isso mesmo @Renato. Muito obrigado pela ajuda e desculpe pela pergunta mal elaborada. irei melhorar da próxima! Commented 21/10/2019 às 17:03
  • @Renato já pode responder, obrigado! Commented 23/10/2019 às 12:56

1 Resposta 1

1

Para resolver através de código javascript, você precisaria armazenar qual o valor anteriormente selecionado, e devolver o valor original do mesmo no começo da função.

Porém, dado que você já têm css, incluindo seletor baseado em seleção: .radio_item:checked+label, você pode construir em cima disso.

Examplo, criar uma classe imgForUnchecked para ser a imagem apresentada quando o radio selecionado não estiver selecionado e uma classe imgForChecked para ser a imagem apresentada quando o radio estiver selecionado:

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

Então podemos fazer através de CSS, esconder o imgForUnchekedquando o radio estiver selecionado:

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

E esconder o imgForChecked quando o radio não estiver selecionado.

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

Demo, editado do original: https://jsfiddle.net/renatomariscal/soz5ymwd/

1
  • Perfeito, obrigado pela explicação! (y) Commented 25/10/2019 às 16:46

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .