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 eines dieser drei geklickt wird. In jQuery haben wir ID- (#) und Klassen- (.) Selektoren, aber was ist, wenn ich ein Optionsfeld mit seinem Namen wie unten suchen möchte?

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

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

Dies sollte es tun, all dies steht in der Dokumentation , die ein sehr ähnliches Beispiel dafür 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 eine Reihe von Elementen und keine IDs zu gruppieren, da diese eindeutig sein sollten.

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 der ausgewählten Schaltfläche wird in val platziert.

Update: Nach dem Posten habe ich entschieden, dass Paolos Antwort oben besser ist, da sie eine DOM-Durchquerung weniger verwendet. Ich lasse diese Antwort stehen, da sie zeigt, wie das ausgewählte Element browserübergreifend kompatibel ist.

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

ein anderer Weg

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

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

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

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

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

Danke 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, da sich in jQuery 1.8 und höher eine Änderung geändert hat, die die Art und Weise ändert, wie diese Frage jetzt beantwortet wird.

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

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

Ihre Antwort gilt nun für alle Versionen von jQuery 1.8 und höher:

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

Informationen zur Änderung in der Readme-Datei 1.8 und zum für diese Änderung spezifischen Ticket sowie Informationen dazu finden Sie auf der Seite : Radioauswahl im Abschnitt Zusätzliche Informationen.

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

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

jsfiddle

Eine Leistungsübersicht der aktuellen Antworten finden Sie hier

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

alert ($ ("Eingabe: Radio: markiert"). val ());

Sie können die Filterfunktion verwenden, wenn Sie mehr als eine Funkgruppe auf der Seite haben (siehe unten)

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

Hier ist Geigen-URL

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>

Wenn Sie einen wahren / falschen Wert wünschen, verwenden Sie diesen:

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

So etwas vielleicht?

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

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

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

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

Prost!

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

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

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

Jquery:

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

Ich hoffe es hilft..

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

Möglicherweise stellen Sie fest, dass die Verwendung der Klassenauswahl zum Abrufen des ASP.NET RadioButtonSteuerelementwerts immer leer ist. Hier ist der Grund.

Sie erstellen die RadioButtonSteuerung ASP.NETwie 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.NETrendert folgendes HTML für IhreRadioButton

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

Denn ASP.NETwir möchten keinen RadioButtonKontrollnamen oder keine ID verwenden, da sie sich aus irgendeinem Grund außerhalb der Hand des Benutzers ändern können (Änderung des Containernamens, des Formularnamens, des Benutzerkontrollnamens usw.), wie Sie im obigen Code sehen können.

Der einzig mögliche Weg, um den Wert von RadioButtonusing jQuery zu ermitteln, ist die Verwendung der CSS-Klasse, wie in dieser Antwort auf eine völlig unabhängige Frage wie folgt erwähnt

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});