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

Das sollte genügen, denn all dies ist in der Dokumentation die ein sehr ähnliches Beispiel wie dieses enthält:

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

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

Answer 2

Um festzustellen, welches Optionsfeld markiert ist, versuchen Sie Folgendes:

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

Das Ereignis wird für alle Optionsschaltflächen in der Gruppe ausgelöst, und der Wert der ausgewählten Schaltfläche wird in val gesetzt.

Update: Nach der Veröffentlichung habe ich beschlossen, dass Paolos Antwort oben besser ist, da sie einen DOM-Traversal weniger verwendet. Ich lasse diese Antwort stehen, da sie zeigt, wie man das ausgewählte Element auf eine Weise erhält, die browserübergreifend kompatibel ist.

Answer 3

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

Answer 4

Andere Art

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

Answer 5

Das funktioniert bei mir hervorragend. Sie haben zum Beispiel zwei Optionsfelder mit demselben "Namen" und möchten nur den Wert des markierten Feldes abfragen. Sie können dies versuchen.

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