¿Cuál es la diferencia entre jQuery .val() y .attr ('value')?

Question

Creo que el título es lo suficientemente

Answer 1

.val() obras clara sobre todos los elementos del tipo de entrada en una forma útil, incluyendo <select> ... incluso en los casos de <select multiple>, casillas de verificación y botones de radio (en el que .val() Obtiene o establece una matriz de valores seleccionados, no solo una cadena).

Así que básicamente tienen propósitos diferentes, a pesar de que .attr('value') se comporta igual en algunas situaciones, como cuadros de texto. El método preferido es .val() para obtener un comportamiento consistente en todas partes.

---

Sólo por diversión, aquí hay un ejemplo menos conocido de casillas de verificación que hace .val() útil:

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

usted puede hacer esto:

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

.... que comprobará los primeros 3 cuadros. You can give it a try here.

Answer 2

También .attr ('valor') devuelve el valor que estaba antes de editar el campo de entrada. Y .val() devuelve el valor actual.

Answer 3

Para añadir a la respuesta de Actis ...

también .attr ('valor') devuelve el valor que estaba antes de editar entrada de campo . Y .val() devuelve el valor actual.

Al trabajar con un campo de entrada de texto, los métodos setter de .attr() y .val() funcionan de manera diferente.

.val('newval') 

establecerá el valor que el usuario ve en la página y actualizará el valor devuelto por las siguientes llamadas al método .val(). No establecerá el valor = atributo del elemento.

Otoh

.attr('value','newval') 

fijará el valor = atributo en el elemento. Si el usuario no ha escrito y no se ha llamado a .val (newval), al hacerlo también se actualizará visualmente el control y se actualizará el valor devuelto por .val().

Puede investigar más a fondo con la siguiente jsFiddle:

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

Buena suerte.