Was ist der Unterschied zwischen jQuery .val () und .attr ('value')?

Antworten:

82

.val()Funktioniert auf nützliche Weise auf alle Elemente des Eingabetyps, einschließlich <select>... auch bei <select multiple>Kontrollkästchen und Optionsfeldern (bei denen .val()ein Array ausgewählter Werte abgerufen oder festgelegt wird , nicht nur eine Zeichenfolge).

Im Grunde dienen sie unterschiedlichen Zwecken, obwohl sie .attr('value')sich in einigen Situationen wie Textfelder gleich verhalten. Die bevorzugte Methode besteht .val()darin, überall ein konsistentes Verhalten zu erzielen.

Hier ist ein weniger bekanntes Beispiel für Kontrollkästchen, das .val()praktisch ist:

<input name="mytest" type="checkbox" value="1">
<input name="mytest" type="checkbox" value="2">
<input name="mytest" type="checkbox" value="3">
<input name="mytest" type="checkbox" value="4">

Du kannst das:

$("input[name='mytest']").val([1, 2, 3]);

.... was die ersten 3 Kästchen ankreuzt. Hier können Sie es versuchen .

Nick Craver
quelle
1
Danke für das weniger bekannte Beispiel.
ScottE
1
Gut geschrieben! Möglicherweise möchten Sie eine kurze Erklärung zur browserübergreifenden Normalisierung hinzufügen, die jQuery mit Methoden wie dieser ausführt.
Mekwall
11
Beachten Sie auch, dass .attr('value')der ursprüngliche Wert und nicht der aktuelle Status gelesen wird. Siehe auch.
XML
9

Außerdem gibt .attr ('Wert') den Wert zurück, der vor dem Bearbeiten des Eingabefelds vorhanden war. Und .val () gibt den aktuellen Wert zurück.

actis
quelle
2

Zur Antwort von actis hinzufügen ...

Außerdem gibt .attr ('Wert') den Wert zurück, der vor dem Bearbeiten des Eingabefelds vorhanden war. Und .val () gibt den aktuellen Wert zurück.

Bei der Arbeit mit einem Texteingabefeld funktionieren die Setter-Methoden von .attr () und .val () unterschiedlich.

.val('newval')

legt den Wert fest, den der Benutzer auf der Seite sieht, und aktualisiert den Wert, der durch nachfolgende .val () -Methodenaufrufe zurückgegeben wird. Das value = -Attribut des Elements wird nicht festgelegt.

OTOH

.attr('value','newval')

setzt das value = -Attribut für das Element. Wenn der Benutzer nicht eingegeben hat und .val (newval) nicht aufgerufen wurde, wird dadurch auch das Steuerelement visuell aktualisiert und der von .val () zurückgegebene Wert aktualisiert.

Sie können mit der folgenden jsfiddle weiter nachforschen:

https://jsfiddle.net/jasonnet/vamLww2k/

Viel Glück.

user3624334
quelle