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!
isChecked
? Coloque a implementação no corpo do snippet do código para que possamos executá-lo.name
para osinput
do tiporadio
, criando assim um grupo. Em cada grupo, automaticamente apenas um input poderá estar ativo de cada vez.