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.
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.
Respostas:
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);
}
});
$radios.removeAttr('checked')
antes do suporte. Isso confundirá o navegador e os valores publicados.
Que tal um forro?
$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
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();
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:
$("[name=myRadio]").val(["myValue"]);
$("#myRadio1").prop("checked", true);
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
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);
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"]);
}
$("*")
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
document.querySelectorAll
faz todos os trabalhos.
$("input[name=gender]")
ou $("input[name=gender]:radio")
ou (para navegadores modernos)$("input[name=gender][type=radio]")
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);
};
Solução JS nativa:
document.querySelector('input[name=gender][value=Female]').checked = true;
HTML:
<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female
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>
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.
$("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
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');
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.
// 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.
Isso funciona para vários botões de opção
$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);