Optionsfeld jQuery set


134

Ich versuche ein Optionsfeld zu setzen. Ich möchte es mit dem Wert oder der ID einstellen.

Das habe ich versucht.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol ist die ID des Optionsfelds.

Vielleicht ist eine kleine Bearbeitung angebracht.

Es gibt zwei Sätze von Optionsfeldern, eines mit Spalten und das andere mit Zeilen. Ich sehe den Sinn darin, keine IDs zu verwenden. Mein Fehler. Also ich habe als Beispiel:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

und

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

Wenn die ID entfernt ist, muss ich die richtige einstellen.


Antworten:


196

Ihr Selektor sucht nach dem Nachkommen eines input:radio[name=cols]Elements mit der ID newcol(also dem Wert dieser Variablen).

Versuchen Sie dies stattdessen (da Sie sowieso nach ID auswählen):

$('#' + newcol).prop('checked',true);

Hier ist eine Demo: http://jsfiddle.net/jasper/n8CdM/1/

Ab jQuery 1.6 lautet die bevorzugte Methode zum Ändern einer Eigenschaft .prop(): http://api.jquery.com/prop


5
+1 für propvs attr. attrveraltet für Eigenschaften und funktioniert nicht mehr in jQuery 2.0))
Gavenkoa

87

Ich habe die Antwort hier gefunden:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Wenn Sie ein Optionsfeld aktivieren möchten, MÜSSEN Sie den Wert grundsätzlich als Array übergeben:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);

Hallo, dieser Link enthält keinen vorgeschlagenen Inhalt. Warum lehnt ihr meine Bearbeitung immer wieder ab, um den Link zu entfernen? Es enthält nichts in Bezug auf die Angelegenheit.
Menuka Ishan

@ MenukaIshan, der Punkt ist: Kredit geben. Der Link ist auf web.archive.org verfügbar, und der Typ, der ihn zum ersten Mal geschrieben hat und von dem ich die Idee der Antwort habe, muss seine Gutschrift erhalten. Entfernen Sie den Link nicht, und wenn Sie den Originalbeitrag sehen möchten, kopieren Sie den Link und fügen Sie ihn ein (ich weiß nicht, warum er auf die alte Seite anstatt auf web.archive.org verweist)
Chococroc

2
@Chococroc Sie haben den Markdown der Frage nicht richtig konfiguriert. Ich habe die Webarchivversion gesehen und richtig verlinkt. Nach der Überprüfung Es wird korrekt auf die Website verlinkt.
Menuka Ishan

2
Es scheint, dass dies die akzeptierte Antwort sein sollte, da es die Lösung ist, die in den jQuery-Dokumenten erwähnt wird
plong0

15

In Ihrer Auswahl scheinen Sie zu versuchen, ein verschachteltes Element Ihres Optionsfelds mit einer bestimmten ID abzurufen. Wenn Sie ein Optionsfeld aktivieren möchten, sollten Sie dieses Optionsfeld in der Auswahl auswählen und nicht etwas anderes:

$('input:radio[name="cols"]').attr('checked', 'checked');

Dies setzt voraus, dass Sie das folgende Optionsfeld in Ihrem Markup haben:

<input type="radio" name="cols" value="1" />

Wenn Ihr Optionsfeld eine ID hatte:

<input type="radio" name="cols" value="1" id="myradio" />

Sie können direkt einen ID-Selektor verwenden:

$('#myradio').attr('checked', 'checked');

Wenn es mehrere Radios mit dem colsNamen $('input:radio[name="cols"]').attr('checked', 'checked');gibt, wird nur das letzte ausgewählt. Der Code wird jeweils ausgeführt, aber jedes Mal, wenn Sie die checkedEigenschaft festlegen , wird das zuvor festgelegte Element deaktiviert. Hier ist eine Demo: jsfiddle.net/jasper/n8CdM/2
Jasper

@ Jasper, ja, das stimmt. Aus diesem Grund habe ich vorgeschlagen, einen ID-Selektor zu verwenden.
Darin Dimitrov

12

Sie können den folgenden Code ausprobieren:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked');

Dadurch wird das Attribut festgelegt, das für die Funkspalten und den angegebenen Wert überprüft wurde.


1
...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.Quelle: api.jquery.com/attr
Jasper

10

Warum brauchen Sie 'input:radio[name=cols]'. Sie kennen Ihr HTML nicht, aber unter der Annahme, dass IDs eindeutig sind, können Sie dies einfach tun.

$('#'+newcol).prop('checked', true);

6

Versuche dies:

$("#" + newcol).attr("checked", "checked");

Ich hatte Probleme mit attr("checked", true), daher verwende ich stattdessen eher die oben genannten.

Wenn Sie die ID haben, brauchen Sie diese anderen Dinge nicht zur Auswahl. Eine ID ist eindeutig.


1
Stütze ist besser als attr für solche Dinge
RozzA

attr ist in jQuery 1.9+ weg. Verwenden Sie prop.
Mike_Laird

Sie haben Recht, aber letztendlich hängt es von Ihrer spezifischen Situation ab. Wenn Ihr Code immer mit jQuery 1.6+ ausgeführt wird, ist prop der richtige Weg. Wenn Ihr Code jedoch möglicherweise auf älteren Versionen ausgeführt wird, ist die Lösung nicht so einfach. Zum Beispiel pflege ich das jQuery PickList-Plugin und wir unterstützen jQuery 1.4+, daher ist die einfache Verwendung von prop keine Option. Dies ist eine offene Eintrittskarte. Wenn Sie also elegante Vorschläge haben, würde ich sie gerne hören. Ich hatte einfach noch keine Zeit für die Recherche.
Der Awnry Bär

Das Problem ist, dass Ihre Lösung, selbst wenn sie abwärtskompatibler ist, in diesem Fall einfach nicht funktioniert: Wählen Sie A, es wird ein neues checked="checked"Attribut angezeigt und der Browser zeigt es als aktiviert an. Wählen Sie dann B und das Gleiche passiert. Wenn Sie nun erneut A auswählen, hat es bereits ein checked="checked"Attribut und nichts ändert sich. Als Nebeneffekt wird B weiterhin ausgewählt, nicht A.
Kyborek

2

Da newcoles sich um die ID des Optionsfelds handelt, können Sie es einfach wie folgt verwenden.

$("#"+newcol).attr('checked',true);

2

Die Verwendung .filter()funktioniert auch und ist flexibel für ID, Wert, Name:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(gesehen auf diesem Blog )


1
Ich glaube, dies ist eine ebenso gültige Antwort, aber sie sollte die Methode prop () verwenden: $ ('input [name = "cols"]'). Filter ("[value = 'Site']"). Prop ('geprüft ', wahr);. Der Benutzer möchte durch "Wert oder ID" einstellen. Es kann vorkommen, dass Sie nicht für jede Funkoption ID-Werte festlegen möchten. Daher ist es hilfreich, nach Namen zu suchen und nach Werten zu filtern.
Zac Imboden

2

Vorherige Antworten kombinieren:

$('input[name="cols"]').filter("[value='Site']").click();

0

Sie können einfach verwenden:

$("input[name='cols']").click();

0

Die gewählte Antwort funktioniert in diesem Fall.

Bei der Frage ging es jedoch darum, das Element basierend auf der Radiogruppe und der dynamischen ID zu finden, und die Antwort kann auch das angezeigte Optionsfeld unberührt lassen.

In dieser Zeile wird genau ausgewählt, wonach gefragt wurde, während die Änderung auch auf dem Bildschirm angezeigt wird.

$('input:radio[name=cols][id='+ newcol +']').click();
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.