jak ustawić opcję radiową sprawdzaną podczas ładowania za pomocą jQuery

Jak ustawić opcję sprawdzania obciążenia radia za pomocą jQuery?

Musisz sprawdzić, czy nie jest ustawiony żaden domyślny, a następnie ustawić domyślny

Załóżmy, że masz takie przyciski opcji, na przykład:

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

I chciałeś sprawdzić ten z wartością obciążenia „Mężczyzna”, jeśli nie jest sprawdzone radio:

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

Co powiesz na jedną wkładkę?

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

Ten spowoduje awarię form.reset ():

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

Ale ten działa:

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

JQuery ma dwa sposoby ustawiania statusu sprawdzania dla radia i pól wyboru i zależy to od tego, czy używasz atrybutu value w znacznikach HTML, czy nie:

Jeśli mają atrybut wartości:

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

Jeśli nie mają atrybutu wartości:

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

Więcej szczegółów

W pierwszym przypadku określamy całą grupę radiową za pomocą nazwy i informujemy JQuery, aby znalazł radio do wyboru za pomocą funkcji val. Funkcja val pobiera tablicę 1-elementową i znajduje radio z pasującą wartością, ustawiając jej sprawdzone = prawda. Inne o tej samej nazwie zostaną odznaczone. Jeśli nie znaleziono radia z pasującą wartością, wszystkie zostaną odznaczone. Jeśli istnieje wiele radiotelefonów o tej samej nazwie i wartości, ostatni zostałby wybrany, a inne zostałyby odznaczone.

Jeśli nie używasz atrybutu wartości dla radia, musisz użyć unikalnego identyfikatora, aby wybrać określone radio w grupie. W takim przypadku musisz użyć funkcji prop, aby ustawić właściwość „zaznaczone”. Wiele osób nie używa atrybutu wartości z polami wyboru, więc numer 2 bardziej nadaje się do pól wyboru niż radia. Pamiętaj również, że ponieważ pola wyboru nie tworzą grupy, gdy mają taką samą nazwę, możesz zrobić to $("[name=myCheckBox").prop("checked", true);dla pól wyboru.

Możesz grać z tym kodem tutaj: http://jsbin.com/OSULAtu/1/edit?html,output

Podobała mi się odpowiedź @Amc. Odkryłem, że wyrażenie może być dalej skondensowane, aby nie używać wywołania filter () (@chaiko najwyraźniej również to zauważyło). Również prop () jest sposobem na przejście w porównaniu z attr () dla jQuery v1.6 +, zobacz oficjalną najlepszą praktykę na ten temat w dokumentacji jQuery dla prop () .

Rozważ te same tagi wejściowe z odpowiedzi @Paolo Bergantino.

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

Zaktualizowany jeden wiersz może brzmieć:

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

Myślę, że można założyć, że ta nazwa jest unikalna, a całe radio w grupie ma tę samą nazwę. Następnie możesz użyć takiej obsługi jQuery:

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

Uwaga: Przekazywanie tablicy jest ważne.

Wersja warunkowa:

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

Jeśli chcesz, aby był naprawdę dynamiczny i wybierał radio odpowiadające przychodzącym danym, to działa. Wykorzystuje wartość płci przekazywanych danych lub używa wartości domyślnej.

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

Natywne rozwiązanie JS:

 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

A jeśli chcesz przekazać wartość ze swojego modelu i chcesz wybrać przycisk opcji z grupy przy obciążeniu na podstawie wartości, użyj:

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

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

Nie potrzebuję tego wszystkiego. Za pomocą prostego i starego HTML możesz osiągnąć to, co chcesz. Jeśli pozwolisz radio, które chcesz domyślnie sprawdzić, tak:
<input type='radio' name='gender' checked='true' value='Male'>
Gdy strona się ładuje, zostanie sprawdzona.

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

Oto przykład z powyższymi metodami:

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

W javascript:

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

Zwróć uwagę na to zachowanie podczas pobierania wartości wejściowych radia:

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

});

Tak $('input[name="myRadio"]').val()nie zwróci sprawdzenia wartości wejściowych radiowej, jak można się spodziewać - zwraca wartość pierwszego przycisku radiowego.

De esta forma Jquery otrzymuje wszystkie elementy w kratkę

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

// Jeśli robisz to na javascript lub frameworku takim jak kręgosłup, często się z tym spotkasz, możesz mieć coś takiego

$MobileRadio = $( '#mobileUrlRadio' );

podczas

$MobileRadio.checked = true;

nie będzie działać,

$MobileRadio[0].checked = true;

będzie.

Twój selektor może być taki, jak inni poleceni powyżej.

Działa to w przypadku wielu przycisków opcji

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);