.val() funciona en todos los elementos de tipo de entrada de manera útil, incluido <select> ...incluso en los casos de <select multiple> , casillas de verificación y botones de radio (en los que .val() obtiene o establece una matriz de valores seleccionados no solo una cadena).

Básicamente, sirven para diferentes propósitos, aunque .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.

Solo por diversión, aquí hay un ejemplo menos conocido de casillas de verificación que hace que .val() sea ú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">

Puedes hacerlo:

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

....que marcará las primeras 3 casillas. Puedes intentarlo aquí .

Además, .attr('value') devuelve el valor que tenía antes de editar el campo de entrada. Y .val() devuelve el valor actual.

Para agregar a la respuesta de actis ...

Además, .attr('value') devuelve el valor que tenía antes de editar el campo de entrada. Y .val() devuelve el valor actual.

Cuando se trabaja con un campo de entrada de texto, los métodos de establecimiento 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 subsiguientes llamadas al método .val(). No establecerá el atributo value= del elemento.

OTOH

 .attr('value','newval')

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

Puede investigar más a fondo con el siguiente jsfiddle:

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

Buena suerte.