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

Question

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 der ausgewählten Optionsschaltfläche abrufen, wenn eine dieser drei Schaltflächen angeklickt wird. In jQuery haben wir id (#) und class (.) Selektoren, aber was, wenn ich ein Radio-Button durch seinen Namen, wie unten zu finden?

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

Bitte sagen Sie mir, wie ich dieses Problem lösen kann.

Answer 1

Der folgende Code wird verwendet, um den Wert des ausgewählten Optionsfelds nach Namen abzurufen

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

Danke Adnan

Answer 2

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

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

へそ曲がり

Für einen Leistungsüberblick über die aktuellen Antworten hier prüfen

Answer 3

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

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

Um dies zu tun, ersetzen Sie jetzt einfach die :radio con [type=radio] .

So wird 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 sich über die Änderung in der 1.8 Readme-Datei y das spezifische Ticket für diese Änderung sowie ein Verständnis für das Warum der :radio selector page unter dem Abschnitt Zusätzliche Informationen.

Answer 4

Wenn Sie den Wert der standardmäßig ausgewählten Optionsschaltfläche vor einem Klickereignis wissen möchten, versuchen Sie Folgendes:

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

Answer 5

Sie können die Filterfunktion verwenden, wenn Sie mehr als eine Radiogruppe auf der Seite haben, wie unten dargestellt

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

Hier ist die Url des Fiddles

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