Jak w jQuery mogę wybrać element według jego nazwy?


328

Mam 3 przyciski opcji na mojej stronie internetowej, jak poniżej:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

W jQuery chcę uzyskać wartość wybranego przycisku opcji po kliknięciu dowolnego z tych trzech przycisków. W jQuery mamy selektory id (#) i class (.), Ale co jeśli chcę znaleźć przycisk opcji po jego nazwie, jak poniżej?

$("<radiobutton name attribute>").click(function(){});

Powiedz mi, jak rozwiązać ten problem.


5
nie musisz ściśle określać atrybutu „for”, o ile pola są zawarte między odpowiadającymi im znacznikami „label”
Lucjusz

2
jQuery 1.8 i wyżej to zmienia .... Dodałem odpowiedź poniżej wyjaśniającą.
Kevin LaBranche

3
Odpowiedź A1rPun jest najlepsza: jedna linijka nie jQuery!
Rudey

1
Użyłem przycisku opcji do utrzymania stanu w mojej aplikacji js. Debugowano na dobrą godzinę przed sprawdzeniem tego wątku. Sprawdź to
Prasanth

document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });
Zwykle

Odpowiedzi:


339

Powinno to zrobić, wszystko to znajduje się w dokumentacji , która ma bardzo podobny przykład:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

Powinienem również zauważyć, że w tym fragmencie masz wiele identycznych identyfikatorów. To jest nieprawidłowy HTML. Używaj klas do grupowania zestawu elementów, a nie identyfikatorów, ponieważ powinny być unikalne.


4
@gargantaun - co się stanie, jeśli klikniesz przycisk opcji?
Paolo Bergantino,

11
Słuszna uwaga. Chociaż nadal nie jest to „Jak uzyskać wybraną wartość przycisku radiowego za pomocą jej nazwy w jQuery?”. To „Jak uzyskać wybraną wartość przycisku radiowego, klikając ją za pomocą jQuery?”. Mała różnica, ale trochę mnie zaskoczyła.
gigantyczny

1
Zgodnie z pytaniem ta odpowiedź jest poprawna. w ujęciu globalnym wybieramy odpowiedź clayton.
Krish

8
Począwszy od jQuery 1.8, [type='radio']zamiast :radiotego jQuery może korzystać ze zwiększenia wydajności zapewnianego przez natywną querySelectorAll()metodę DOM .
Adam

2
Odpowiedź @ PaoloBergantino jest w 100% poprawna, ponieważ zwraca wartość po kliknięciu żądanego przycisku opcji. Odpowiedź @ Clayton Rabenda nie daje takiej odpowiedzi.
Azam Alvi,

185

Aby ustalić, który przycisk opcji jest zaznaczony, spróbuj tego:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

Zdarzenie zostanie przechwycone dla wszystkich przycisków opcji w grupie, a wartość wybranego przycisku zostanie umieszczona w val.

Aktualizacja: Po opublikowaniu zdecydowałem, że powyższa odpowiedź Paolo jest lepsza, ponieważ używa jednego mniejszego przejścia DOM. Pozwalam na odpowiedź, ponieważ pokazuje, jak uzyskać wybrany element w sposób kompatybilny z różnymi przeglądarkami.


3
Nie wiem jak przeczytałem pytanie, to była odpowiedź, której potrzebowałem. : sprawdzone, czego mi brakowało w równaniu. Dzięki.
HPWD,

9
Począwszy od jQuery 1.8, [type='radio']zamiast :radiotego jQuery może korzystać ze zwiększenia wydajności zapewnianego przez natywną querySelectorAll()metodę DOM .
Adam

Dałem spację po dwukropku, a przed pomyłką „sprawdziłem”. Upewnij się więc, że nie ma miejsca.
Palenie małp

Przydatna odpowiedź dla tych, którzy nie chcą uzyskać wartości z modułu obsługi zdarzeń kliknięcia. W przeciwnym razie musisz użyć, :checkedaby sprawdzić, który przycisk jest zaznaczony, na przykład za pomocą modułu obsługi zdarzeń przesłania formularza, w którym thissłowo kluczowe nie jest mapowane na kliknięty przycisk.
che-azeh

155
$('input:radio[name=theme]:checked').val();

Kontynuowałem po prostu $("input[name=theme]:checked").val();(pomijając tę :radioczęść i wydaje się, że działa dobrze w IE, FF, Safari i Chrome. Musiałem współpracować z jQ v 1.3 ... Oczywiście oznacza to, że jest tylko jeden element o nazwie „motyw”
morespace54

2
To najlepsza odpowiedź IMO: „podaj mi wartość sprawdzonego radia o tej nazwie”. Nie ma potrzeby imprez itp.
ProVega

39

Inny sposób

$('input:radio[name=theme]').filter(":checked").val()

1
Ten jest przydatny, jeśli chcesz
zdobyć

Jest to solidne, ponieważ można użyć zmiennej, aby zachować przyciski opcji, np. $themeRadios = $('input:radio[name=theme'])Ustawić dowolne moduły obsługi zdarzeń, a następnie uzyskać wartość za pomocą filtra, np $themeRadios.filter(":checked").val().
Joshua Pinter

Uwielbiam to rozwiązanie.
Abel

20

To działa świetnie dla mnie. Na przykład masz dwa przyciski opcji o tej samej „nazwie” i chciałeś po prostu uzyskać wartość zaznaczonego. Możesz spróbować tego.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

Powodem, dla którego ta odpowiedź jest lepsza niż obecnie akceptowana odpowiedź 230+, jest to, że odpowiedź ta uwzględnia również, gdy użytkownik wchodzi w interakcję z przyciskiem opcji za pomocą klawiatury.
gmeben

16

Poniższy kod służy do uzyskania wybranej wartości przycisku opcji według nazwy

jQuery("input:radio[name=theme]:checked").val();

Dzięki Adnan


hmm .. nie poprawiłem formatowania kodu w twojej ostatniej odpowiedzi? Proszę się tym zająć :-)
kleopatra

13

Znalazłem to pytanie, gdy szukałem błędu po aktualizacji z wersji 1.7.2 jQuery do 1.8.2. Dodaję swoją odpowiedź, ponieważ w jQuery 1.8 i nowszych nastąpiła zmiana, która zmienia sposób, w jaki odpowiedź na to pytanie jest teraz.

W jQuery 1.8 przestali używać pseudoselektorów, takich jak: radio,: pole wyboru,: tekst.

Aby wykonać powyższe teraz po prostu wymienić :radiosię [type=radio].

Twoja odpowiedź jest teraz dostępna dla wszystkich wersji jQuery 1.8 i nowszych:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

Możesz przeczytać o zmianie w pliku Readme 1.8 i specyficznym dla niej bilecie, a także zrozumieć, dlaczego : na stronie wyboru radia w sekcji Informacje dodatkowe.


5
: zaznaczone nie jest przestarzałe. Możesz więc użyć$("input[type='radio'][name='theme']:checked")
Adam

12

Dla każdego, kto nie chce dołączać biblioteki, aby zrobić coś naprawdę prostego:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Przegląd wydajności aktualnych odpowiedzi można znaleźć tutaj


1
Dziękuję za tę odpowiedź. Ponieważ nie byłem w stanie uzyskać akceptowanej odpowiedzi do pracy w żadnej formie.
Chris Holmes,

9

Jeśli chcesz poznać wartość domyślnie wybranego przycisku opcji przed zdarzeniem kliknięcia, spróbuj tego:

alert ($ („wejście: radio: zaznaczone”). val ());

6

Możesz użyć funkcji filtrowania, jeśli na stronie znajduje się więcej niż jedna grupa radiowa, jak poniżej

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Oto adres URL skrzypce

http://jsfiddle.net/h6ye7/67/


4
<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

4

Jeśli chcesz wartość prawda / fałsz, użyj tego:

  $("input:radio[name=theme]").is(":checked")

3

Może coś takiego?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

Po kliknięciu dowolnego przycisku opcji, sądzę, że zostanie on wybrany, więc zostanie on wywołany dla wybranego przycisku opcji.


1
@ Jest nieprawidłowe od jQuery 1.3 (przedtem nawet przestarzałe). blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "Stare, XPath, selektory atrybutów stylu: [@ attr = wartość]. Są one przestarzałe od dłuższego czasu - a my w końcu je usuwam. Aby to naprawić, po prostu usuń @! ”
racerror

3

Jeśli masz więcej niż jedną grupę przycisków opcji na tej samej stronie, możesz także spróbować uzyskać wartość przycisku opcji:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

Twoje zdrowie!


2

może również użyć klasy CSS, aby zdefiniować zakres przycisków opcji, a następnie użyć poniższych, aby określić wartość

$('.radio_check:checked').val()

1

To działało dla mnie ..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery:

    $ („. radioClass”). each (function () {
        if ($ (this) .is (': selected'))
        alert ($ (this) .val ());
    });

Mam nadzieję, że to pomoże..



0

Możesz zauważyć, że użycie selektora klasy w celu uzyskania wartości ASP.NET RadioButtonkontrolek jest zawsze puste i oto powód.

RadioButtonKontrolę tworzysz w ASP.NETnastępujący sposób:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

I ASP.NETrenderuje następujące HTML dla twojegoRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Ponieważ ASP.NETnie chcemy używać RadioButtonnazwy kontrolnej ani identyfikatora, ponieważ mogą one zmieniać się z dowolnego powodu z ręki użytkownika (zmiana nazwy kontenera, nazwy formularza, nazwy kontroli użytkownika, ...), jak widać w powyższym kodzie.

Jedynym możliwym do uzyskania sposobem uzyskania wartości przy RadioButtonużyciu jQuery jest użycie klasy css, jak wspomniano w tej odpowiedzi na całkowicie niezwiązane pytanie, jak następuje

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
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.