Defina o rádio selecionado do grupo de rádio com um valor

153

Por que estou lutando com isso?

Eu tenho um valor: 5

Como verifico o botão de opção do grupo "mygroup" com o valor 5?

$("input[name=mygroup]").val(5); // doesn't work?
dcolumbus
fonte

Respostas:

351

Com a ajuda do seletor de atributos, você pode selecionar o elemento de entrada com o valor correspondente. Então você deve definir o atributo explicitamente, usando .attr:

var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');

Desde o jQuery 1.6, você também pode usar o .propmétodo com um valor booleano (esse deve ser o método preferido):

$("input[name=mygroup][value=" + value + "]").prop('checked', true);

Lembre-se de que você primeiro precisa remover o atributo marcado de qualquer um dos botões de opção em um grupo de botões de opção apenas e poderá adicionar propriedade / atributo marcado a um dos botões de opção nesse grupo de botões de opção.

Código para remover o atributo verificado de todos os botões de opção de um grupo de botões de opção -

$('[name="radioSelectionName"]').removeAttr('checked');
Felix Kling
fonte
.prop ( 'verificado', true) é provavelmente melhor ou .is ()
Bladefist
3
@bladefist: .isnão ajudaria aqui, mas eu concordo .prop. Não estava disponível naquela época;) Atualizará minha resposta. Obrigado!
precisa
4
Se o valor do botão de opção tiver um decimal, será necessário colocar o valor entre aspas
Robert
1
@ Robert: Sim, provavelmente. Na documentação : "Pode ser uma palavra única sem aspas ou uma string entre aspas".
Felix Kling
5
Veja a resposta de Jonathan. Os documentos do jQuery mostram que .val()suporta a configuração de valores em grupos de rádio ou caixa de seleção. O caminho dessa resposta funciona tecnicamente, mas é rotativo e muito menos legível / memorável.
Jinglesthula 29/06
144

Existe uma maneira melhor de verificar rádios e caixas de seleção; você precisa passar uma matriz de valores para o método val em vez de um valor bruto

Nota: Se você simplesmente passar o valor sozinho (sem estar dentro de uma matriz ), isso resultará em todos os valores de "mygroup" sendo definidos como o valor.

$("input[name=mygroup]").val([5]);

Aqui está o documento do jQuery que explica como funciona: http://api.jquery.com/val/#val-value

E .val([...])também trabalha com elementos de formulário como <input type="checkbox">, <input type="radio">e <option>está dentro de um <select>.

As entradas e as opções com um valor que corresponde a um dos elementos da matriz serão verificadas ou selecionadas, enquanto aquelas com um valor que não corresponda a um dos elementos da matriz serão desmarcadas ou desmarcadas.

Violino demonstrando este trabalho: https://jsfiddle.net/92nekvp3/

Jonathan Pasquier
fonte
Resposta aceita (bem, deveria ser). No jQuery 1.0, consulte o último exemplo de documentos (role para baixo): api.jquery.com/val Copiado aqui: jsfiddle.net/JoePC/w1f9ykso
JoePC
Essa é uma maneira agradável e consistente de definir todos os valores de entrada. Pena que demorei 6 anos para aprender sobre isso.
Jeff Lowery
1
Passei um bom tempo tentando descobrir por que todos os meus valores no grupo estavam sendo definidos para o valor passado, em vez de verificar o valor. Acontece que eu passei o valor por si só, não dentro de uma matriz.
OXiGEN 19/04/19
14

Tente o seguinte:

$('input:radio[name="mygroup"][value="5"]').attr('checked',true);

Demonstração JS Fiddle .

David diz para restabelecer Monica
fonte
1
@ Hunter, obrigado ... hoje claramente não é o meu dia para jQuery ... = /
David diz que restabelece Monica
8
$("input[name='mygroup'][value='5']").attr("checked", true);
caçador
fonte
7

Quando você altera o valor do atributo, como mencionado acima, o changeevento não é acionado; portanto, se necessário, por alguns motivos, você pode acioná-lo da seguinte maneira

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');
Jean-Marc Amon
fonte
4

$("input[name='RadioTest'][value='2']").prop('checked', true);

JS fiddle Demo

karan
fonte
1

Ou você pode simplesmente escrever o atributo value:

$(':radio[value=<yourvalue>]').attr('checked',true);

Isso funciona para mim.

Ketan
fonte
0
var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}
Amin Fathi
fonte
4
Você pode explicar o que o seu código faz na sua resposta? Pelo menos uma frase ou mais. E como ele resolve a solução. Obrigado.
28716 Alex
0

Versão JavaScript pura:

document.querySelector('input[name="myradio"][value="5"]').checked = true;
JukkaV
fonte
-1
$('input[name="mygroup"]').val([5])
Anjitha
fonte
1
Você pode explicar o que diferencia sua solução das outras soluções já fornecidas?
Giovani Vercauteren
@Giovani Vercauteren, devemos dar o nome como uma string. Então, eu dou o mygroup como uma string no código.
Anjitha 25/10/19