Ustaw wybrane radio z grupy radiowej z wartością

153

Dlaczego się z tym zmagam?

Mam wartość: 5

Jak sprawdzić przycisk opcji grupy „mygroup” o wartości 5?

$("input[name=mygroup]").val(5); // doesn't work?
dcolumbus
źródło

Odpowiedzi:

351

Za pomocą selektora atrybutu możesz wybrać element wejściowy z odpowiednią wartością. Następnie musisz jawnie ustawić atrybut, używając .attr:

var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');

Od jQuery 1.6 możesz również użyć .propmetody z wartością logiczną (powinna to być metoda preferowana):

$("input[name=mygroup][value=" + value + "]").prop('checked', true);

Pamiętaj, że najpierw musisz usunąć zaznaczony atrybut z dowolnego przycisku opcji w jednej grupie przycisków opcji, a dopiero potem będziesz mógł dodać zaznaczoną właściwość / atrybut do jednego z przycisków opcji w tej grupie przycisków opcji.

Kod do usunięcia zaznaczonego atrybutu ze wszystkich przycisków opcji jednej grupy przycisków opcji -

$('[name="radioSelectionName"]').removeAttr('checked');
Felix Kling
źródło
.prop ('zaznaczone', prawda) jest prawdopodobnie lepsze lub
.is
3
@bladefist: .isnie pomogłoby tutaj, ale zgadzam się z .prop. Nie było wtedy dostępne;) Zaktualizuje moją odpowiedź. Dzięki!
Felix Kling
4
Jeśli wartość przycisku opcji ma ułamek dziesiętny, musisz umieścić wartość w cudzysłowie
Robert
1
@Robert: Tak, prawdopodobnie. Z dokumentacji : „Może to być niecytowane pojedyncze słowo lub ciąg znaków w cudzysłowie”.
Felix Kling
5
Zobacz odpowiedź Jonathana. Dokumentacja jQuery pokazuje, że .val()obsługuje ustawianie wartości w grupach radiowych lub pól wyboru. Ta odpowiedź działa technicznie, ale jest okrężna i znacznie mniej czytelna / zapadająca w pamięć.
jinglesthula
144

Jest lepszy sposób sprawdzania radia i pola wyboru; musisz przekazać tablicę wartości do metody val zamiast wartości surowej

Uwaga: Jeśli po prostu przekażesz wartość samą w sobie (bez znajdowania się wewnątrz tablicy ), spowoduje to, że wszystkie wartości „mygroup” zostaną ustawione na wartość.

$("input[name=mygroup]").val([5]);

Oto dokument jQuery, który wyjaśnia, jak to działa: http://api.jquery.com/val/#val-value

A .val([...])także współpracuje z elementów formularzy, takich jak <input type="checkbox">, <input type="radio">i <option>jest w środku tematyce <select>.

Dane wejściowe i opcje mające wartość pasującą do jednego z elementów tablicy zostaną zaznaczone lub zaznaczone, a te, które mają wartość, która nie pasuje do jednego z elementów tablicy, będą odznaczone lub odznaczone

Fiddle demonstruje to działanie: https://jsfiddle.net/92nekvp3/

Jonathan Pasquier
źródło
Zaakceptowana odpowiedź (cóż, powinna być). Począwszy od jQuery 1.0, zobacz ostatni przykład z dokumentacji (przewiń do dołu): api.jquery.com/val Skopiowano tutaj: jsfiddle.net/JoePC/w1f9ykso
JoePC
To ładny i spójny sposób ustawiania wszystkich wartości wejściowych. Szkoda, że ​​poznanie tego zajęło mi 6 lat.
Jeff Lowery,
1
Spędziłem trochę czasu, próbując dowiedzieć się, dlaczego wszystkie moje wartości w grupie były ustawiane na przekazaną wartość, zamiast sprawdzać wartość. Okazuje się, że przekazałem tę wartość samodzielnie, a nie wewnątrz tablicy.
OXiGEN
14

Spróbuj tego:

$('input:radio[name="mygroup"][value="5"]').attr('checked',true);

Demo JS Fiddle .

David mówi, że przywróć Monikę
źródło
1
@Hunter, dzięki ... najwyraźniej dzisiaj nie jest mój dzień na jQuery ... = /
David mówi, że przywróć Monikę
8
$("input[name='mygroup'][value='5']").attr("checked", true);
myśliwy
źródło
7

Kiedy zmieniasz wartość atrybutu, jak wspomniano powyżej, changezdarzenie nie jest wyzwalane, więc w razie potrzeby z jakichś powodów możesz je wywołać w ten sposób

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');
Jean-Marc Amon
źródło
4

$("input[name='RadioTest'][value='2']").prop('checked', true);

JS skrzypce Demo

karan
źródło
1

Lub możesz po prostu wpisać do niego atrybut wartości:

$(':radio[value=<yourvalue>]').attr('checked',true);

To działa dla mnie.

Ketan
źródło
0
var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}
Amin Fathi
źródło
4
Czy możesz wyjaśnić, co robi Twój kod w odpowiedzi? Przynajmniej jedno zdanie. I jak to rozwiązuje rozwiązanie. Dziękuję Ci.
Alex
0

Wersja czystego JavaScript:

document.querySelector('input[name="myradio"][value="5"]').checked = true;
JukkaV
źródło
-1
$('input[name="mygroup"]').val([5])
Anjitha
źródło
1
Czy możesz wyjaśnić, czym różni się Twoje rozwiązanie od innych już dostarczonych rozwiązań?
Giovani Vercauteren
@Giovani Vercauteren, powinniśmy podać nazwę jako ciąg. Więc podaję mygroup jako ciąg w kodzie.
Anjitha