como definir opção de rádio verificado onload com jQuery


297

Como definir a opção de rádio marcada como onload com jQuery?

É necessário verificar se nenhum padrão está definido e depois definir um padrão.


1
@ryenus a outra pergunta não seria uma duplicata minha desde que eu fiz a minha antes da outra pergunta?
Phill Pafford

Respostas:


558

Digamos que você tenha botões de opção como estes, por exemplo:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

E você queria verificar aquele com o valor de "Masculino" onload se nenhum rádio estiver marcado:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});

Apenas imaginando Paolo, IIRC, a especificação diz que o atributo verificado deve ser verificado = "verificado" (embora eu possa estar errado). O jQuery converte true para 'marcado' neste exemplo? Apenas curioso ...
alex

8
Meu exemplo original tinha 'verificado', 'verificado', é uma daquelas coisas que eu nunca consigo lembrar qual é o certo. O jQuery descobre isso de qualquer maneira, mas eu sei que se você deseja definir o atributo verificado real de um elemento DOM, ele deve ser um booleano, como document.getElementById ('x'). selected = true; - então eu fui com isso.
214 Paolo Bergantino

só quero acrescentar esta notação colchete [name = sexo] trabalho Indiferente no navegador estoque de Windows Phone 7.
最白目

Eu apenas tentei com FF e jQuery 1.9.1 e .attr ('marcado', verdadeiro); não funciona, no entanto .prop ('marcado', verdadeiro); faz. veja stackoverflow.com/questions/4618733/… (duplicado?)
IARI

Rápido: NÃO use $radios.removeAttr('checked')antes do suporte. Isso confundirá o navegador e os valores publicados.
igasparetto 15/10

109

Que tal um forro?

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);

O acima é melhor, pois suporta valores de nomes mais complexos.
J. Martin

13
Isso não responde totalmente à pergunta das operações - ele precisa verificar se uma opção padrão já está marcada primeiro. Agora você também deve usar prop () em vez de attr () para esse tipo de coisa. Para obter explicação, consulte a seção "Atributos versus propriedades" aqui: api.jquery.com/prop . Além disso, não há necessidade de filtro extra, você pode apenas combinar os 2 seletores, por exemplo, $ ("input [name = gender] [value = Male]"). Prop ("selected", true);
jackocnr

3
Esta solução funciona pela primeira vez que eu ligo o rádio, mas falha depois. Usando "prop" em vez de "attr", ele funciona perfeitamente. Então: $ ('input: radio [name = "gender"]'). Filter ('[value = "Male"]'). Prop ('marcado', verdadeiro);
Andrew

2
Correct - prop () agora é o método recomendado para acessar propriedades.
Andrew McCombe

1
Mais simples: $ ('input: radio [name = "gender"] [value = "Male"]'). Attr ('marcado', verdadeiro);
Régis

52

Este causará a falha form.reset ():

$('input:radio[name=gender][value=Male]').attr('checked', true);

Mas este funciona:

$('input:radio[name=gender][value=Male]').click();

5
Eu recomendo que você use o gatilho ('clique') pouco mais legível e interrompa uma chamada de método.
precisa saber é o seguinte

35

Na verdade, o JQuery possui duas maneiras de definir o status verificado para caixas de seleção e rádio e depende se você está usando o atributo value na marcação HTML ou não:

Se eles tiverem atributo de valor:

$("[name=myRadio]").val(["myValue"]);

Se eles não tiverem atributo de valor:

$("#myRadio1").prop("checked", true);

Mais detalhes

No primeiro caso, especificamos todo o grupo de rádio usando o nome e dizemos ao JQuery para encontrar o rádio para selecionar usando a função val. A função val pega uma matriz de 1 elemento e localiza o rádio com o valor correspondente, defina seu verificado = true. Outros com o mesmo nome seriam desmarcados. Se nenhum rádio com valor correspondente for encontrado, todos serão desmarcados. Se houver vários rádios com o mesmo nome e valor, o último será selecionado e outros serão desmarcados.

Se você não estiver usando o atributo value para o rádio, precisará usar um ID exclusivo para selecionar um rádio específico no grupo. Nesse caso, você precisa usar a função prop para definir a propriedade "marcada". Muitas pessoas não usam o atributo value com caixas de seleção, portanto, o número 2 é mais aplicável a caixas de seleção do que a rádios. Observe também que, como as caixas de seleção não formam grupo quando têm o mesmo nome, você pode fazer isso $("[name=myCheckBox").prop("checked", true);pelas caixas de seleção.

Você pode jogar com este código aqui: http://jsbin.com/OSULAtu/1/edit?html,output


22

Gostei da resposta de @Amc. Achei que a expressão poderia ser condensada ainda mais para não usar uma chamada filter () (@chaiko aparentemente também percebeu isso). Além disso, prop () é o caminho a percorrer vs attr () para o jQuery v1.6 +, consulte a documentação do jQuery para prop () para obter as melhores práticas oficiais sobre o assunto.

Considere as mesmas tags de entrada da resposta de @Paolo Bergantino.

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

O one-liner atualizado pode ler algo como:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);

15

Eu acho que você pode assumir, esse nome é único e todo rádio do grupo tem o mesmo nome. Então você pode usar o suporte ao jQuery assim:

$("[name=gender]").val(["Male"]);

Nota: Passar matriz é importante.

Versão condicionada:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

1
Isso é ruim o examinando cada elemento para um valor eu não recomendo isso é usado sempre
Barkermn01

@MartinBarker, você pode explicar o que vocês 'digitalizam'?
Saram

Pesquisando no DOM, se você usar nada além de um atributo, forçando o jQuery a percorrer todos os elementos no DOM e verificar a mesma correspondência como se você fosse usá- $("*")lo corresponderia a tudo, então você deve usar um tipo de concessão $("input")ou um ID ser ideal como o DOM tem chamadas nativas para obter um elemento por id
Barkermn01

@MartinBarker - eu concordo. Normalmente prefixo o seletor com o ID do formulário ou forneço parâmetros de contexto. Atualmente, a verificação do DOM não é um esforço do jQuery, mas um mecanismo interno do navegador, document.querySelectorAllfaz todos os trabalhos.
Saram

Para resolver os problemas acima, o uso $("input[name=gender]")ou $("input[name=gender]:radio")ou (para navegadores modernos)$("input[name=gender][type=radio]")
David Balazic

7

Se você deseja que ele seja verdadeiramente dinâmico e selecione o rádio que corresponde aos dados recebidos, isso funciona. Ele está usando o valor de gênero dos dados passados ​​ou usa o padrão.

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};

5

Solução JS nativa:

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML:

<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female

3

E se você deseja passar um valor do seu modelo e deseja selecionar um botão de opção do grupo na carga com base no valor, use:

Jquery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

E o html:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>

2

Não precisa de tudo isso. Com HTML simples e antigo, você pode conseguir o que deseja. Se você deixar o rádio que deseja verificar por padrão, assim:
<input type='radio' name='gender' checked='true' value='Male'>
Quando a página for carregada, ela será verificada.


3
sim, mas preciso que seja dinâmico, pois o site de referência passaria nos padrões no carregamento da página. Tem sido um tempo desde que eu pensei sobre esta questão, então eu espero que eu estou entendendo o que você está tentando dizer
Phill Pafford

2
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);

6
Não poste respostas somente de código. Por favor, dê uma explicação também.
Lee Taylor

2

Aqui está um exemplo com os métodos acima:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

Em javascript:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

1

Observe este comportamento ao obter valores de entrada de rádio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Portanto $('input[name="myRadio"]').val(), não retorna o valor verificado da entrada de rádio, como seria de esperar - ele retorna o valor do primeiro botão de opção.


1

Desta forma, o Jquery obtém apenas o elemento verificado

$('input[name="radioInline"]:checked').val()

2
Você precisa descrever sua resposta e formatar seu código
Michael

0

// Se você estiver fazendo isso em javascript ou em uma estrutura como backbone, encontrará muito isso, poderá ter algo parecido com isto

$MobileRadio = $( '#mobileUrlRadio' );

enquanto

$MobileRadio.checked = true;

não funciona,

$MobileRadio[0].checked = true;

vai.

seu seletor também pode ser como os outros caras acima.


0

Isso funciona para vários botões de opção

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
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.