JQuery

JQuery: Dica rápida – Radio Button

Algumas formas de obter o valor de um radio button selecionado.

$(“:radio”) é equivalente $(“input[type=’radio’]”) e pode ser usado assim também $(“input:radio”).

— fazendo referência a um radio button específico (usando o atributo name)
$(“input[type=’radio’][name=’cor’]”) ou $(‘input[name=’cor’]:radio’)

Exemplos:

<input type="radio" value="azul" id="radio" name="cor"> Azul
<input type="radio" value="amarelo" id="radio" name="cor"> Amarelo
<br />
<input type="button" id="verifica" value="Verifica" />
// clique do botão
$('#verifica').click(function() {
  // forma 1  - será retornado, sempre, o valor do primeiro elemento do tipo radio 
  var $cor = $("input[type='radio'][name='cor']").val();
  alert($cor);
 
  // forma 2 - retorna o valor correto selecionado
  var $cor = $("input[name='cor']:checked").val()
 
  // forma 3 - retorna o valor correto selecionado
  var $radio  = $("input[name='cor']");
  var $cor    = $radio.filter(':checked').val();
}); 
 
// ao selecionar um item
$("input:radio[name='cor']").click(function() {
  var $cor = $(this).val();
  alert($cor);
});
 
$("input:radio[name='cor']").click(function() {
  var $cor = $("input:radio[name='cor']:checked").val();
  alert($cor);
});
 
// obtém o valor de todos os radios button selecionados
$("input:radio").click(function() {
  var $cor = $(this).val();
  alert($cor);
});

3 comentários sobre “JQuery: Dica rápida – Radio Button

  • Olá Tiago,
    olha, isso salva muita gente como eu, valeu por compartilhar.

    Resposta
  • Top, explicação simples e útil, obrigado pela dica.

    Resposta

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *