Description: Get the current value of the first element in the set of matched elements.
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 use :checked to select the right elements. For example:
|
1
2
3
4
5
6
7
8
9
10
11
|
// Get the value from the selected option in a dropdown$( "select#foo option:checked" ).val(); // Get the value from a dropdown select directly$( "select#foo" ).val(); // Get the value from a checked checkbox$( "input[type=checkbox][name=bar]:checked" ).val(); // Get the value from a set of radio buttons$( "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:
|
1
2
3
4
5
|
$.valHooks.textarea = { get: function( elem ) { return elem.value.replace( /
?
/g, "
" ); }}; |
Examples:
Get the single value from a single select and an array of values from a multiple select and display their values.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html lang="en"><head> <meta charset="utf-8"> <title>val demo</title> <style> p { color: red; margin: 4px; } b { color: blue; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body> <p></p> <select id="single"> <option>Single</option> <option>Single2</option></select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option></select> <script>function displayVals() { var singleValues = $( "#single" ).val(); var multipleValues = $( "#multiple" ).val() || []; // When using jQuery 3: // var multipleValues = $( "#multiple" ).val(); $( "p" ).html( "<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join( ", " ) );} $( "select" ).change( displayVals );displayVals();</script> </body></html> |
When do I use .val() vs .innerHTML?
问题
In JQuery when trying to access elements, I see that if I have a form (lets say a textarea), and I want to get the text inside of it, I must use $("textarea").val();
Instead if I have a h1 element, I must use $("h")[0].innerHTML;
Why is this the case? h1.val()/textarea.innerHTML do not work
回答
.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.
innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.
text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText
Reference links about innerHTML, innerText, val(), text(), html()
jQuery(#id).val() vs. getElementById(#id).value
回答1
The biggest advantage of using jQuery().val() over document.getElementById().value is that the former will not throw an error if no elements are matched, where-as the latter will. document.getElementById() returns null if no elements are matched, where-as jQuery() returns an empty jQuery object, which still supports all methods (but val() will return undefined).
There is no inconsistency when using .value for form elements. However, jQuery.val() standardises the interface for collecting the selected value in select boxes; where as in standard HTML you have to resort to using .options[this.selectedIndex].value.
回答2
If you're using <select> elements as well, .value won't work whereas .val() will.
I would not mind about performance of just getting a value. If you want the best performance, perhaps you shouldn't use a library at all.
jQuery .val() vs .attr("value")
回答1
There is a big difference between an objects properties and an objects attributes
See this questions (and its answers) for some of the differences: .prop() vs .attr()
The gist is that .attr(...) is only getting the objects value at the start (when the html is created). val() is getting the object's property value which can change many times.
回答2
Since jQuery 1.6, attr() will return the original value of an attribute (the one in the markup itself). You need to use prop() to get the current value:
var currentValue = $obj.prop("value");
However, using val() is not always the same. For instance, the value of <select> elements is actually the value of their selected option. val() takes that into account, but prop() does not. For this reason, val() is preferred.