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


328

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.


5
você não precisa especificar estritamente o atributo 'for', desde que os campos sejam incluídos entre as tags 'label' correspondentes
Lucius

2
O jQuery 1.8 e acima altera isso .... Eu adicionei uma resposta abaixo explicando.
Kevin LaBranche

3
A resposta de A1rPun é a melhor: um one-liner não-jQuery!
Rudey

1
Usei um botão de opção para manter o estado no meu aplicativo js. Depurado por uma boa hora antes de verificar esta discussão. Verifique isso
Prasanth

Na planície JS:document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });
mplungjan 18/04/18

Respostas:


339

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.


4
@gargantaun - se você clicar em um botão de opção, o que acontece?
Paolo Bergantino

11
Bom ponto. Embora ainda não seja "Como obter o valor selecionado do botão de opção usando seu nome no jQuery?". É "Como obter o valor selecionado do botão de opção ao clicar nele usando o jQuery?". Uma pequena diferença, mas que me deixou um pouco confusa.
colossal

1
De acordo com a pergunta, esta resposta está correta. na visão global, buscamos a resposta de clayton.
Krish 27/05

8
A partir do uso do jQuery 1.8, em [type='radio']vez :radiodessa maneira, o jQuery pode tirar proveito do aumento de desempenho fornecido pelo querySelectorAll()método DOM nativo .
Adam

2
A resposta @PaoloBergantino está 100% correta, pois retorna o valor após clicar no botão de opção desejado. @ A resposta Clayton Rabenda não fornece isso.
Azam Alvi

185

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.


3
Com base em como eu li a pergunta, esta foi a resposta que eu precisava. : marcado é o que estava faltando na minha equação. Obrigado.
HPWD 25/10/12

9
A partir do uso do jQuery 1.8, em [type='radio']vez :radiodessa maneira, o jQuery pode tirar proveito do aumento de desempenho fornecido pelo querySelectorAll()método DOM nativo .
Adam

Eu dei um espaço após dois pontos e antes "verifiquei" por engano. Portanto, verifique se não há espaço.
Monkey

Uma resposta útil para aqueles que não desejam obter o valor de um manipulador de eventos de clique. Caso contrário, você deve usar :checkedpara encontrar qual botão está marcado, por exemplo, com um manipulador de eventos de envio de formulário em que a thispalavra - chave não é mapeada para o botão clicado.
precisa saber é

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

Eu continuei simplesmente com $("input[name=theme]:checked").val();(deixando a :radioparte de fora e parece funcionar bem no IE, FF, Safari e Chrome. Eu tive que trabalhar com o jQ v 1.3 ... Claro, isso significa que existe apenas um elemento chamado 'theme'
morespace54

2
Esta é a melhor resposta da IMO, diz "obtenha-me o valor do rádio CHECKED com ESTE nome". Não há necessidade de eventos, etc.
ProVega

39

outra maneira

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

1
Este é útil se você estiver interessado em pegar o valor +1
swapnesh

Isso é sólido porque você pode usar uma variável para manter os botões de opção, por exemplo, $themeRadios = $('input:radio[name=theme'])para definir qualquer manipulador de eventos e, em seguida, obter o valor usando o filtro, por exemplo $themeRadios.filter(":checked").val().
Joshua Pinter

Eu amo essa solução.
Abel

20

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();

A razão pela qual essa resposta é melhor que a resposta upvoted atualmente aceita por mais de 230 é porque essa resposta também é responsável quando o usuário interage com um botão de opção pelo teclado.
precisa saber é

16

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


hmm .. não corrigi sua formatação de código na sua última resposta? Por favor, cuide de você mesmo :-)
kleopatra

13

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.


5
: marcado não está obsoleto. Assim você pode usar$("input[type='radio'][name='theme']:checked")
Adam

12

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


1
Obrigado por esta resposta. Porque não consegui obter a resposta aceita para funcionar de qualquer forma.
31817 Chris Holmes

9

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 ());

6

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/


4
<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>

4

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

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

3

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.


1
O @ é inválido a partir do jQuery 1.3 (obsoleto antes disso, mesmo). blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "Antigos, XPath, seletores de atributos de estilo: [@ attr = value]. Estes foram obsoletos por algum tempo - e nós finalmente os removemos. Para corrigi-lo, remova o @! "
racerror

3

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!


2

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()

1

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..


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

0

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();
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.