como opção de rádio conjunto verificado ONLOAD com jQuery
-
22-08-2019 - |
Pergunta
Como opção set rádio verificado ONLOAD com jQuery?
precisa verificar se há padrão é definido e, em seguida, definir um padrão
Solução
dizer que você tinha botões de rádio como estes, por exemplo:
<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>
E você queria verificar o que tem um valor de "masculino" onload se nenhuma rádio está marcada:
$(function() {
var $radios = $('input:radio[name=gender]');
if($radios.is(':checked') === false) {
$radios.filter('[value=Male]').prop('checked', true);
}
});
Outras dicas
Como cerca de um forro de um?
$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
Este irá causar form.reset () falha:
$('input:radio[name=gender][value=Male]').attr('checked', true);
Mas este obras:
$('input:radio[name=gender][value=Male]').click();
JQuery tem realmente duas maneiras de definir verificado estado de rádio e caixas de seleção e isso depende se você estiver usando o atributo de valor em HTML marcação ou não:
Se eles têm atributo de valor:
$("[name=myRadio]").val(["myValue"]);
Se eles não têm atributo de valor:
$("#myRadio1").prop("checked", true);
Detalhes
No primeiro caso, especificar todo o grupo de rádio usando o nome e dizer JQuery para encontrar rádio para selecionar usando a função val. A função val leva gama 1-elemento e encontra o rádio com valor correspondente, defina sua verificado = true. Outros com a mesma nome seria desmarcada. Se nenhuma rádio com valor correspondente encontrado, em seguida, todos serão desmarcadas. Se houver vários rádios com mesmo nome e valor, em seguida, o último seria selecionado e outros seriam desmarcados.
Se você não estiver usando o atributo de valor para o rádio, então você precisa usar um ID único para selecionar especial de opção no grupo. Neste caso, você precisa usar a função de suporte ao conjunto "marcada" propriedade. Muitas pessoas não usam o atributo de valor com caixas de seleção de modo # 2 é mais aplicável para caixas de seleção, em seguida, rádios. Observe também que, como caixas de seleção não formam grupo quando eles têm mesmo nome, você pode fazer $("[name=myCheckBox").prop("checked", true);
para caixas de seleção.
Você pode jogar com este código aqui: http://jsbin.com/OSULAtu/1/edit?html , saída
Eu gostei da resposta por @Amc. Eu encontrei a expressão poderia ser condensado ainda mais para não usar uma chamada filter () (@chaiko aparentemente também notei isso). Além disso, prop () é o caminho a percorrer vs attr () para jQuery v1.6 +, consulte o documentação do jQuery para prop () para as melhores práticas oficiais sobre o assunto.
Considere as mesmas marcas de entrada de resposta de @Paolo Bergantino.
<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>
O atualizados one-liner pode ler algo como:
$('input:radio[name="gender"][value="Male"]').prop('checked', true);
Eu acho que você pode supor, esse nome é único e todas as rádio no grupo tem o mesmo nome. Então você pode usar o suporte jQuery assim:
$("[name=gender]").val(["Male"]);
Nota:. array Passando é importante
Versão condicionado:
if (!$("[name=gender]:checked").length) {
$("[name=gender]").val(["Male"]);
}
Se você quer que ele seja verdadeiramente dinâmico e selecione a opção que corresponde aos dados de entrada, isso funciona. Ele está usando o valor gênero dos dados passados ??ou usos 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 nativa JS:
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ê quer passar um valor a partir do seu modelo e deseja selecionar um botão de opção do grupo em carga com base no valor, de uso:
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 simples e velho HTML, você pode conseguir o que deseja.
Se deixar o rádio desejada marcada por padrão como este:
<input type='radio' name='gender' checked='true' value='Male'>
Quando carrega a página, ele vai vir marcada.
$("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
Aqui está um exemplo com acima métodos:
<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');
Nota este comportamento quando se 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() );
});
Assim $('input[name="myRadio"]').val()
não devolver o valor marcado da entrada de rádio, como você poderia esperar -. Ele retorna o valor do primeiro botão de rádio
De ESTA forma Jquery obtiene de solo el elemento verificados
$('input[name="radioInline"]:checked').val()
// Se você está fazendo isso em javascript ou um quadro como backbone, você vai encontrar isso muito você poderia ter algo como isto
$MobileRadio = $( '#mobileUrlRadio' );
enquanto
$MobileRadio.checked = true;
não vai funcionar,
$MobileRadio[0].checked = true;
vai.
seu seletor pode ser que os outros caras acima recomendado também.
Isso funciona para vários botões de rádio
$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);