0

Possuo o seguinte código em JavaScript puro (não quero usar jQuery aqui):

const petSize = document.querySelectorAll('.sizeRadio')

const isChecked = (checkableElement => checkableElement.checked ? true : false )

const fixUnselectedRadio = (radioToCheck, radioToUncheck) =>{
    radioToCheck.addEventListener('click', ()=>{
        radioToUncheck.checked = false
    })   
}

let tamArray = petSize.forEach((tamanho, index, petSize)=>{
    if(isChecked(tamanho)){
        fixUnselectedRadio(tamanho, !tamanho )
    }
})
<div class="tamanho mt-1 mb-2">
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="gigante" name="gigante" value="gigante" /> </input> 
      <label class="form-check-label" for="gigante">Gigante (Acima de 70cm - 45 a 60Kg)</label>
  </div>         
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="grande" name="grande" value="grande" /> </input> 
      <label class="form-check-label" for="gigante">Grande (De 50 a 69cm - 25 a 45Kg)</label>
  </div>
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="medio" name="medio" value="medio" /> </input> 
      <label class="form-check-label" for="gigante">Médio (De 36cm a 49cm - 15 a 25kg)</label>
  </div>
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="medio" name="medio" value="pequeno" /> </input> 
      <label class="form-check-label" for="gigante">Pequeno (De 28cm a 35cm - 6 a 15kg)</label>
  </div>
  <div class="form-check">
      <input class="sizeRadio form-check-input" type="radio" id="mini" name="mini" value="mini" /> </input> 
      <label class="form-check-label" for="gigante">Mini (Abaixo de 28cm - até 6kg)</label>
  </div>
</div>

Ao executarem e tentarem selecionar os radios, vão perceber o que acontece: todos ficam ativos com a exceção do terceiro e quarto radios). Eu preciso que apenas um fique ativo por vez porém não consegui solucionar dessa forma e não encontrei alguma solução online!

5
  • 1
    Como você implementou a função isChecked? Coloque a implementação no corpo do snippet do código para que possamos executá-lo. 29/05/2019 às 1:33
  • ah perdão, não percebi que esqueci 29/05/2019 às 1:33
  • Pronto, atualizei 29/05/2019 às 1:34
  • 1
    Não precisa de JS para fazer isso, basta dar o mesmo name para os input do tipo radio, criando assim um grupo. Em cada grupo, automaticamente apenas um input poderá estar ativo de cada vez.
    – Andre
    29/05/2019 às 1:37
  • Cara, eu não pensei nisso :o que simples! 29/05/2019 às 1:40

1 Resposta 1

1

A forma mais simples de se fazer isso é compartilhar o mesmo atributo name entre todos os radios e usar o evento change para determinar quando algum outro campo é selecionado. Usar o name para isso é inclusive a forma mais recomendada de se alcançar esse resultado.

Assim:

document.querySelectorAll('[name="size"]')
  .forEach((field) => field.addEventListener('change', (event) => {
    console.log(event.target.value)
  }))
<input type="radio" name="size" value="small" /> Pequeno
<input type="radio" name="size" value="normal" /> Normal
<input type="radio" name="size" value="large" /> Grande

Note acima que para diferenciar os três campos, eu uso o atributo value. Desse modo, serei capaz de conseguir um valor específico para cada um deles.

1
  • É exatamente isso que preciso, mais simples do que imaginei :o Muito obrigado! 29/05/2019 às 1:41

Você deve fazer log-in para responder a esta pergunta.

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