web-dev-qa-db-ger.com

Wie wähle ich in jQuery ein Element anhand seines Namensattributs aus?

Ich habe 3 Optionsfelder auf meiner Webseite, wie unten:

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

In jQuery möchte ich den Wert des ausgewählten Optionsfelds abrufen, wenn auf eine dieser drei Optionen geklickt wird. In jQuery haben wir ID- (#) und Klassen- (.) Selektoren, aber was ist, wenn ich ein Optionsfeld anhand seines Namens suchen möchte, wie unten gezeigt?

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

Bitte sagen Sie mir, wie Sie dieses Problem lösen können.

326
Prashant

Dies sollte es tun, all dies ist in der Dokumentation , die ein sehr ähnliches Beispiel dazu hat:

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

Ich sollte auch beachten, dass Sie mehrere identische IDs in diesem Snippet haben. Dies ist ungültiges HTML. Verwenden Sie Klassen, um Elementgruppen und keine IDs zu gruppieren, da diese eindeutig sein sollten.

335

Versuchen Sie Folgendes, um festzustellen, welches Optionsfeld aktiviert ist:

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

Das Ereignis wird für alle Optionsfelder in der Gruppe abgefangen, und der Wert des ausgewählten Felds wird in val gesetzt.

pdate: Nach dem Posten habe ich festgestellt, dass die obige Antwort von Paolo besser ist, da sie eine DOM-Überquerung weniger verwendet. Ich lasse diese Antwort stehen, da sie zeigt, wie das ausgewählte Element browserübergreifend abgerufen werden kann.

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

ein anderer Weg

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

Das funktioniert gut für mich. Zum Beispiel haben Sie zwei Optionsfelder mit demselben "Namen", und Sie wollten nur den Wert des aktivierten erhalten. Sie können diesen versuchen.

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

Der folgende Code wird verwendet, um den ausgewählten Optionsfeldwert nach Namen abzurufen

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

Vielen Dank, Adnan

15
Muhammad Adnan

Ich habe diese Frage gefunden, als ich nach einem Upgrade von 1.7.2 von jQuery auf 1.8.2 nach einem Fehler gesucht habe. Ich füge meine Antwort hinzu, weil es eine Änderung in jQuery 1.8 und höher gibt, die die Art und Weise ändert, wie diese Frage jetzt beantwortet wird.

Mit jQuery 1.8 haben sie veraltet die Pseudo-Selektoren wie: radio,: checkbox,: text.

Ersetzen Sie dazu einfach :radio durch [type=radio].

So lautet Ihre Antwort jetzt für alle Versionen von jQuery 1.8 und höher:

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

Sie können über Änderung in der Readme-Datei 1.8 und das Ticket, das für diese Änderung spezifisch ist sowie über das Warum auf der Seite : Radioauswahl nachlesen im Abschnitt Zusätzliche Informationen.

13
klabranche

Für alle, die keine Bibliothek einbinden möchten, um etwas wirklich Einfaches zu tun:

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

jsfiddle

Für eine Leistungsübersicht der aktuellen Antworten hier ankreuzen

12
A1rPun

Wenn Sie den Wert des standardmäßig ausgewählten Optionsfelds vor einem Klickereignis kennen möchten, versuchen Sie Folgendes:

alert ($ ("input: radio: checked"). val ());
9
lhoess

Sie können die Filterfunktion verwenden, wenn auf der Seite mehr als eine Radiogruppe vorhanden ist (siehe unten)

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

Hier ist Geigen-URL

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

6
Muhammad Salman

Wenn Sie einen True/False-Wert wünschen, verwenden Sie diesen:

  $("input:radio[name=theme]").is(":checked")
4
gls123
<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
kartheek

So etwas vielleicht?

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

Wenn Sie auf ein Optionsfeld klicken, wird es meines Erachtens ausgewählt, sodass dies für das ausgewählte Optionsfeld aufgerufen wird.

3
tschaible

Wenn Sie mehr als eine Gruppe von Optionsfeldern auf derselben Seite haben, können Sie auch Folgendes versuchen, um den Wert des Optionsfelds zu ermitteln:

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

Prost!

3
ahmed

sie können auch eine CSS-Klasse verwenden, um den Bereich der Optionsfelder zu definieren, und anschließend mithilfe der folgenden Optionen den Wert ermitteln

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

Das hat bei mir funktioniert ..

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

Abfrage:

 
 $ (". radioClass"). each (function () {
 if ($ (this) .is (': checked')) 
 alert ($ (this) .val ()); 
}); 
 

Ich hoffe es hilft..

1
Ravi M

Möglicherweise bemerken Sie, dass die Verwendung des Klassenselektors zum Abrufen des Werts von ASP.NET RadioButton Steuerelementen immer leer ist. Hier ist der Grund.

Sie erstellen das RadioButton Steuerelement in ASP.NET wie folgt:

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

Und ASP.NET rendert folgenden HTML-Code für Ihr RadioButton

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

Für ASP.NET möchten wir den Namen oder die ID des Steuerelements RadioButton nicht verwenden, da sie sich aus beliebigen Gründen außerhalb der Kontrolle des Benutzers ändern können (Änderung des Containernamens, Formularnamens, Benutzerkontrollnamens, ...) als Sie können im obigen Code sehen.

Die einzige verbleibende Möglichkeit, den Wert von RadioButton mit jQuery zu ermitteln, besteht in der Verwendung der in this genannten CSS-Klasse

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
0
AaA
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});
0
Ankur