Przycisk opcji jQuery set

134

Próbuję ustawić przycisk opcji. Chcę ustawić go za pomocą wartości lub identyfikatora.

To jest to, czego próbowałem.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol to identyfikator przycisku opcji.

Może trzeba trochę edytować.

Istnieją dwa zestawy skrzynek radiowych, jedna z kolumnami, a druga z rzędami. Więc widzę sens w nieużywaniu identyfikatorów. Mój błąd. Mam więc jako przykład:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

i

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

z usuniętym identyfikatorem i muszę ustawić właściwy.

mike628
źródło

Odpowiedzi:

196

Twój selektor szuka potomka input:radio[name=cols]elementu, który ma id newcol(no cóż, wartość tej zmiennej).

Spróbuj tego zamiast tego (ponieważ i tak wybierasz według identyfikatora):

$('#' + newcol).prop('checked',true);

Oto demo: http://jsfiddle.net/jasper/n8CdM/1/

Ponadto od jQuery 1.6 preferowaną metodą zmiany właściwości jest .prop(): http://api.jquery.com/prop

Jaspis
źródło
5
+1 na propżywo attr. attrprzestarzałe dla właściwości i nie działa już w jQuery 2.0))
gavenkoa
87

Znalazłem odpowiedź tutaj:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Zasadniczo, jeśli chcesz sprawdzić jeden przycisk opcji, MUSISZ przekazać wartość jako tablicę:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);
Chococroc
źródło
Hello That Link nie zawiera sugerowanej zawartości. Dlaczego ciągle odrzucacie moją zmianę, aby usunąć link. Nie zawiera nic na ten temat.
Menuka Ishan
@MenukaIshan, chodzi o to: daj kredyt. Link jest dostępny na web.archive.org, a facet, który napisał go po raz pierwszy i od którego dostałem pomysł na odpowiedź, musi otrzymać jego uznanie. Nie usuwaj linku, a jeśli chcesz zobaczyć oryginalny post, skopiuj i wklej link (nie wiem, dlaczego prowadzi do starej strony zamiast do web.archive.org)
Chococroc
2
@Chococroc Nie skonfigurowałeś poprawnie Markdown pytania. Widziałem wersję archiwum WWW i poprawnie ją połączyłem. Po sprawdzeniu będzie poprawnie prowadzić do witryny.
Menuka Ishan
2
Wydaje się, że to powinna być akceptowana odpowiedź, ponieważ jest to rozwiązanie wymienione w dokumentacji jQuery
plong0
15

W swoim selektorze wydaje się, że próbujesz pobrać jakiś zagnieżdżony element swojego przycisku radiowego o podanym identyfikatorze. Jeśli chcesz sprawdzić przycisk opcji, powinieneś wybrać ten przycisk w selektorze, a nie coś innego:

$('input:radio[name="cols"]').attr('checked', 'checked');

Zakłada się, że w znaczniku znajduje się następujący przycisk opcji:

<input type="radio" name="cols" value="1" />

Jeśli twój przycisk opcji miał identyfikator:

<input type="radio" name="cols" value="1" id="myradio" />

możesz bezpośrednio użyć selektora identyfikatora:

$('#myradio').attr('checked', 'checked');
Darin Dimitrov
źródło
Jeśli istnieje wiele radiotelefonów o tej colsnazwie $('input:radio[name="cols"]').attr('checked', 'checked');, wybierze tylko ostatnie. Uruchomi kod na każdym, ale za każdym razem, gdy ustawisz checkedwłaściwość, poprzednio ustawiony element zostanie usunięty. Oto demo: jsfiddle.net/jasper/n8CdM/2
Jasper
@Jasper, tak, to prawda. Dlatego zasugerowałem użycie selektora id.
Darin Dimitrov
12

Możesz wypróbować następujący kod:

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

Spowoduje to ustawienie atrybutu sprawdzonego dla kolumn radiowych i wartości zgodnie z podanymi wartościami.

punita.gosar
źródło
1
...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.Źródło: api.jquery.com/attr
Jasper,
10

Dlaczego potrzebujesz 'input:radio[name=cols]'. Nie znasz swojego kodu HTML, ale zakładając, że identyfikatory są unikalne, możesz to po prostu zrobić.

$('#'+newcol).prop('checked', true);
elclanrs
źródło
6

Spróbuj tego:

$("#" + newcol).attr("checked", "checked");

Miałem problemy z attr("checked", true) , więc zamiast tego używam powyższego.

Ponadto, jeśli masz identyfikator, nie potrzebujesz tych innych rzeczy do wyboru. Identyfikator jest unikalny.

Niedźwiedź Awnry
źródło
1
prop jest lepszy niż attr dla takich rzeczy
RozzA
attr zniknął w jQuery 1.9+ Użyj prop.
Mike_Laird
Masz rację, ale ostatecznie zależy to od twojej konkretnej sytuacji. Jeśli Twój kod będzie zawsze działał z jQuery 1.6+, prop jest najlepszym rozwiązaniem. Ale jeśli Twój kod może działać w starszych wersjach, rozwiązanie nie jest tak proste. Na przykład utrzymuję wtyczkę jQuery PickList i obsługujemy jQuery 1.4+, więc proste użycie właściwości nie wchodzi w grę. To jest bilet otwarty, więc jeśli masz jakieś eleganckie sugestie, chciałbym je usłyszeć; Po prostu nie miałem jeszcze czasu na badania.
The Awnry Bear
Problem polega na tym, że nawet jeśli twoje rozwiązanie może być bardziej kompatybilne wstecz, po prostu nie działa w tym przypadku: wybierz A, otrzyma nowy checked="checked"atrybut, a przeglądarka pokaże go jako zaznaczone, a następnie wybierz B i to samo stanie się. Teraz, gdy ponownie wybierzesz A, będzie miał już checked="checked"atrybut i nic się nie zmieni. Efektem ubocznym tego nadal będzie B, a nie A.
Kyborek
2

Ponieważ newcoljest to identyfikator przycisku opcji, możesz go po prostu użyć, jak poniżej.

$("#"+newcol).attr('checked',true);
Selvakumar Arumugam
źródło
2

Używanie .filter()również działa i jest elastyczne dla id, wartości, nazwy:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(widoczne na tym blogu )

dhc
źródło
1
Uważam, że jest to równie poprawna odpowiedź, ale powinna używać metody prop (): $ ('input [name = "cols"]'). Filter ("[value = 'Site']"). Prop ('zaznaczone ', prawdziwe);. Użytkownik chce ustawić według „wartości lub identyfikatora”. Może się zdarzyć, że nie będziesz chciał ustawiać wartości id dla każdej opcji radiowej, więc pobieranie według nazwy i filtrowanie według wartości jest przydatne.
Zac Imboden,
2

Łączenie poprzednich odpowiedzi:

$('input[name="cols"]').filter("[value='Site']").click();
Graham Laight
źródło
0

Możesz po prostu użyć:

$("input[name='cols']").click();
Markoj
źródło
0

Wybrana odpowiedź działa w tym przypadku.

Ale pytanie dotyczyło znalezienia elementu na podstawie radiogroup i dynamicznego identyfikatora, a odpowiedź może również pozostawić wyświetlany przycisk radiowy nienaruszony.

Ta linia wybiera dokładnie to, o co proszono, pokazując również zmianę na ekranie.

$('input:radio[name=cols][id='+ newcol +']').click();
mnie_
źródło