Quelle est la différence entre jQuery .val() et .attr('value') ?

Question

Je pense que le titre est suffisamment clair

Answer 1

.val() fonctionne sur tous les éléments de type entrée de manière utile, notamment <select> ...même dans les cas de <select multiple> , les cases à cocher et les boutons radio (dans lesquels .val() obtient ou définit un tableau de valeurs sélectionnées et pas seulement une chaîne de caractères).

Donc, fondamentalement, ils servent des objectifs différents, même si .attr('value') se comporte de la même manière dans certaines situations, comme les zones de texte. La méthode préférée est .val() pour obtenir un comportement cohérent partout.

---

Juste pour le plaisir, voici un exemple moins connu pour les cases à cocher qui fait que .val() pratique :

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

Vous pouvez le faire :

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

.... qui vérifiera les 3 premières cases. Vous pouvez l'essayer ici .

Answer 2

De même, .attr('value') renvoie la valeur qui existait avant l'édition du champ de saisie. Et .val() renvoie la valeur actuelle.

Answer 3

Pour compléter la réponse d'actis...

De même, .attr('value') renvoie la valeur qui était avant l'édition du champ de saisie. d'entrée. Et .val() renvoie la valeur actuelle.

Lorsque vous travaillez avec un champ de saisie de texte, les méthodes setter de .attr() et .val() fonctionnent différemment.

.val('newval')

définira la valeur que l'utilisateur verra sur la page et mettra à jour la valeur renvoyée par les appels ultérieurs de la méthode .val(). Elle ne définira pas l'attribut value= de l'élément.

EN REVANCHE,

.attr('value','newval')

va définir l'attribut value= sur l'élément. Si l'utilisateur n'a pas tapé et que .val(newval) n'a pas été appelé, cette opération mettra également à jour visuellement le contrôle et la valeur renvoyée par .val().

Vous pouvez approfondir la question avec le jsfiddle suivant :

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

Bonne chance.