Skip to main content
Pergunta fechada como "Não é adequada para este site" por Largato
Pergunta reaberta por Guilherme Lirio, Augusto Vasques, João Martins, Icaro Martins, LeAndrade
Tirei o código de https://jsfiddle.net/guilhermelirio85/8bz41ehr/ e coloquei na página.
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

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?

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/

Como poderia fazer?

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?

Atualizado para melhor entendimento
Fonte Link

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, a imagemo ícone do mesmo é substituida por outraum í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 a imagemo ícone voltasse aoà cor original. E não sei como fazer para isso acontecer, ou seja, voltasse a ser vermelho.

O que eu fiz está aqui: https://jsfiddle.net/guilhermelirio85/8bz41ehr/

Como poderia fazer?

Amigos, boa tarde. Estou quebrando a cabeça à 2 dias por causa disso:

Tenho 2 rádio button: quando seleciono um, a imagem é substituida por outra, assim como a cor da letra (o primeiro por JS, a segunda por CSS).

Pois bem, quando seleciono o outro radio button, queria que a imagem voltasse ao original. E não sei como fazer para isso acontecer.

O que eu fiz está aqui: https://jsfiddle.net/guilhermelirio85/8bz41ehr/

Como poderia fazer?

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/

Como poderia fazer?

Pergunta fechada como "Precisa de detalhes ou esclarecimentos" por Maniero
Fonte Link

Voltar a imagem original do radio button quando selecionar outro

Amigos, boa tarde. Estou quebrando a cabeça à 2 dias por causa disso:

Tenho 2 rádio button: quando seleciono um, a imagem é substituida por outra, assim como a cor da letra (o primeiro por JS, a segunda por CSS).

Pois bem, quando seleciono o outro radio button, queria que a imagem voltasse ao original. E não sei como fazer para isso acontecer.

O que eu fiz está aqui: https://jsfiddle.net/guilhermelirio85/8bz41ehr/

Como poderia fazer?