Em jQuery, como seleciono um elemento pelo seu atributo de nome?

Eu tenho 3 botões de rádio na minha página web, como abaixo:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

Em jQuery, eu quero obter o valor do botão de rádio selecionado quando qualquer um destes três é clicado. Em jQuery temos seletores de id (#) e classe (.), mas e se eu quiser encontrar um botão de rádio pelo seu nome, como abaixo?

$("<radiobutton name attribute>").click(function(){});

Por favor, diga-me como resolver este problema.

Solução

Isto deve ser feito, tudo isto está na documentação, que tem um exemplo muito semelhante a este:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

Também devo notar que tens várias identificações idênticas nesse bocadinho. Isto é HTML inválido. Use classes para agrupar conjuntos de elementos, não IDs, pois eles devem ser únicos.

Comentários (7)

Para determinar qual botão de rádio é verificado, tente isto:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

O evento será capturado para todos os botões de rádio do grupo e o valor do botão selecionado será colocado em val.

Update: Depois de postar eu decidi que a resposta de Paolo's acima é melhor, já que ele usa menos uma travessia DOM. Estou deixando esta resposta de pé já que ela mostra como obter o elemento selecionado de uma forma que seja compatível com o cross-browser.

Comentários (4)

Algo assim, talvez?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

Quando você clica em qualquer botão de rádio, eu acredito que ele vai acabar sendo selecionado, então isto vai ser chamado para o botão de rádio selecionado.

Comentários (2)