No jQuery, como faço para selecionar um elemento pelo atributo name?

Eu tenho 3 botões de opção na minha página da 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>

No jQuery, quero obter o valor do botão de opção selecionado quando qualquer um desses três for clicado. No jQuery, temos seletores id (#) e class (.), Mas e se eu quiser encontrar um botão de opção pelo nome, como abaixo?

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

Por favor, diga-me como resolver este problema.

Isso deve ser feito, tudo isso 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 observar que você tem vários IDs idênticos nesse snippet. Este é um HTML inválido. Use classes para agrupar um conjunto de elementos, não IDs, pois eles devem ser exclusivos.

Para determinar qual botão de opção está marcado, tente o seguinte:

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

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

Atualização: Depois de postar, decidi que a resposta de Paolo acima é melhor, pois ela usa menos uma travessia de DOM. Estou deixando esta resposta em pé, pois mostra como obter o elemento selecionado de uma maneira que seja compatível com vários navegadores.

$('input:radio[name=theme]:checked').val();

outra maneira

$('input:radio[name=theme]').filter(":checked").val()

Isso funciona muito bem para mim. Por exemplo, você tem dois botões de opção com o mesmo "nome" e deseja apenas obter o valor do verificado. Você pode tentar este.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

O código a seguir é usado para obter o valor do botão de opção selecionado por nome

jQuery("input:radio[name=theme]:checked").val();

Graças Adnan

Encontrei essa pergunta enquanto pesquisava um erro depois de atualizar do 1.7.2 do jQuery para o 1.8.2. Estou adicionando minha resposta porque houve uma alteração no jQuery 1.8 e superior que altera a forma como esta pergunta é respondida agora.

Com o jQuery 1.8, eles preteriram os pseudo-seletores como: radio,: checkbox,: text.

Para fazer o que precede agora, basta substituir o :radiocom [type=radio].

Portanto, sua resposta agora é para todas as versões do jQuery 1.8 e superior:

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

Você pode ler sobre a alteração no leia - me 1.8 e o ticket específico para essa alteração , bem como entender o porquê na página do seletor de rádio: na seção Informações Adicionais.

Para quem não deseja incluir uma biblioteca, faça algo realmente simples:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Para uma visão geral do desempenho das respostas atuais, verifique aqui

Se você deseja saber o valor do botão de opção padrão selecionado antes de um evento de clique, tente o seguinte:

alert ($ ("input: rádio: marcado"). val ());

Você pode usar a função de filtro se tiver mais de um grupo de rádio na página, como abaixo

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Aqui está o violino

http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

Se você deseja um valor verdadeiro / falso, use o seguinte:

  $("input:radio[name=theme]").is(":checked")

Algo assim talvez?

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

Quando você clica em qualquer botão de opção, acredito que ele será selecionado, então isso será chamado para o botão de opção selecionado.

Se você possui mais de um grupo de botões de opção na mesma página, também pode tentar isso para obter o valor do botão de opção:

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

Felicidades!

também pode usar uma classe CSS para definir o intervalo de botões de opção e, em seguida, usar o seguinte para determinar o valor

$('.radio_check:checked').val()

Isso funcionou para mim ..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery:

    $ (". radioClass"). each (function () {
        if ($ (this) .is (': marcado'))
        alerta ($ (this) .val ());
    });

Espero que ajude..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

Você pode perceber que o uso do seletor de classe para obter o valor dos ASP.NET RadioButtoncontroles está sempre vazio e aqui está o motivo.

Você cria o RadioButtoncontrole ASP.NETcomo abaixo:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

E ASP.NETrenderiza o seguinte HTML para o seuRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Pois ASP.NETnão queremos usar o RadioButtonnome ou o ID de controle, pois eles podem mudar por qualquer motivo fora do controle do usuário (alteração no nome do contêiner, nome do formulário, nome do controle do usuário, ...) como você pode ver no código acima.

A única maneira possível de obter o valor do RadioButtonjQuery usando o jQuery é usar a classe css, conforme mencionado nesta resposta a uma pergunta totalmente não relacionada, como a seguir

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});