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

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.

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.

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.

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

Inny sposób

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

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

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

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.

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

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

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

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/

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

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

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

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.

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!

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

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

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

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