The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.
When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option. As of jQuery 3.0, if no options are selected, it returns an empty array; prior to jQuery 3.0, it returns null.
For selects, checkboxes and radio buttons, you can also use the :selected and :checked selectors to get at values. For example:
+For selects, checkboxes and radio buttons, you can use :checked to select the right elements. For example:
+// Get the value from the selected option in a dropdown
+$( "select#foo option:checked" ).val();
-// Get the value from a dropdown select
-$( "select.foo option:selected").val();
-
-// Get the value from a dropdown select even easier
-$( "select.foo" ).val();
+// Get the value from a dropdown select directly
+$( "select#foo" ).val();
// Get the value from a checked checkbox
-$( "input:checkbox:checked" ).val();
+$( "input[type=checkbox][name=bar]:checked" ).val();
// Get the value from a set of radio buttons
-$( "input:radio[name=bar]:checked" ).val();
+$( "input[type=radio][name=baz]:checked" ).val();
Note: At present, using .val() on <textarea> elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR, however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:
Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.
The .val() method allows setting the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value:
-$( "input:text.items" ).val(function( index, value ) {
- return value + " " + this.className;
+$( "input[type=text].tags" ).val(function( index, value ) {
+ return value.trim();
});
This example appends the string " items" to the text inputs' values.
+This example removes leading and trailing whitespace from the values of text inputs with a "tags" class.