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


297

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


1
@ryenus czy drugie pytanie nie byłoby duplikatem mojego, skoro zadałem moje pytanie przed innym pytaniem?
Phill Pafford,

Odpowiedzi:


558

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);
    }
});

Zastanawiam się tylko nad Paolo, IIRC, że specyfikacja mówi, że sprawdzony atrybut ma być sprawdzany = „sprawdzony” (choć mogę się mylić). Czy jQuery tłumaczy „prawda” na „zaznaczone” w tym przykładzie? Po prostu ciekawy ...
alex

8
Mój oryginalny przykład „sprawdził”, „sprawdził”, to jedna z tych rzeczy, których nigdy nie pamiętam, która z nich jest właściwa. jQuery obliczy to w obu kierunkach, ale wiem, że jeśli chcesz ustawić rzeczywisty sprawdzany atrybut elementu DOM, to powinien on być wartością logiczną, np. document.getElementById ('x'). - więc poszedłem z tym.
Paolo Bergantino

po prostu chcę dodać notację w nawiasach kwadratowych [nazwa = płeć] nie działa w standardowej przeglądarce Windows Phone 7.
最 白 目

Właśnie wypróbowałem to z FF i jQuery 1.9.1 i .attr ('sprawdzone', prawda); nie działa jednak .prop („zaznaczone”, prawda); robi. spójrz na stackoverflow.com/questions/4618733/… (duplikat?)
IARI

Szybka: NIE używaj $radios.removeAttr('checked')przed rekwizytem. Spowoduje to zamieszanie przeglądarki i opublikowanych wartości.
igasparetto

109

Co powiesz na jedną wkładkę?

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

Powyższe jest lepsze, ponieważ obsługuje bardziej złożone wartości nazw.
J. Martin

13
To nie w pełni odpowiada na pytanie operacyjne - musi najpierw sprawdzić, czy domyślna opcja jest już zaznaczona. Ponadto powinieneś teraz użyć prop () zamiast attr () do tego rodzaju rzeczy. Aby uzyskać wyjaśnienie, zobacz sekcję „Atrybuty kontra właściwości” tutaj: api.jquery.com/prop . Dodatkowy filtr również nie jest potrzebny, możesz po prostu połączyć 2 selektory, np. $ („Input [name = gender] [value = Male]”). Prop („zaznaczone”, prawda);
jackocnr

3
To rozwiązanie działa po raz pierwszy po ustawieniu radia, ale później nie działa. Dzięki zastosowaniu „prop” zamiast „attr” działa idealnie. Więc: $ ('input: radio [name = "gender"]'). Filter ('[value = "Male"]'). Prop ('zaznaczone', prawda);
Andrew

2
Correct - prop () jest teraz zalecaną metodą dostępu do właściwości.
Andrew McCombe,

1
Prostsze: $ ('input: radio [name = "gender"] [value = "Male"]'). Attr ('zaznaczone', prawda);
Régis,

52

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

5
zaleciłbym użycie wyzwalacza („kliknięcia”) nieco bardziej czytelnego i zatrzymuje wywołanie metody.
Barkermn01

35

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


22

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

15

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"]);
}

1
Szkoda, że ​​skanujesz każdy element pod kątem wartości. Nie polecam, aby to było kiedykolwiek używane
Barkermn01

@MartinBarker czy możesz wyjaśnić, co ludzie, skanując?
Saram

Przeszukując DOM, jeśli używasz tylko atrybutu, który zmusza jQuery do przejścia przez każdy element w DOM i sprawdza, czy dopasowanie jest takie samo, jakbyś go używał $("*"), pasowałby do wszystkiego, więc powinieneś użyć typu najem $("input")lub identyfikator bądź idealny, ponieważ DOM ma natywne wywołania, aby uzyskać element przez id
Barkermn01

@MartinBarker - Zgadzam się. Zwykle wybieram prefiks selektora formularza lub przekazuję parametr kontekstu. Obecnie skanowanie DOM nie jest wysiłkiem jQuery, ale wewnętrzny silnik przeglądarki, document.querySelectorAllrobi wszystko.
Saram

Aby rozwiązać powyższe wątpliwości, użyj $("input[name=gender]")lub $("input[name=gender]:radio")lub (w przypadku współczesnych przeglądarek)$("input[name=gender][type=radio]")
David Balažic

7

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);
};

5

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

3

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>

2

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.


3
tak, ale muszę być dynamiczny, ponieważ witryna odsyłająca przejdzie do wartości domyślnych przy ładowaniu strony. Minęło trochę czasu, odkąd pomyślałem o tym pytaniu, więc mam nadzieję, że rozumiem, co próbujesz powiedzieć
Phill Pafford,


2

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

1

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.


1

De esta forma Jquery otrzymuje wszystkie elementy w kratkę

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

2
Musisz opisać swoją odpowiedź i sformatować kod
Michael

0

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


0

Działa to w przypadku wielu przycisków opcji

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.