|
13 | 13 | <longdesc>
|
14 | 14 | <p>The <code>.val()</code> method is primarily used to get the values of form elements such as <code>input</code>, <code>select</code> and <code>textarea</code>. When called on an empty collection, it returns <code>undefined</code>.</p>
|
15 | 15 | <p>When the first element in the collection is a <code>select-multiple</code> (i.e., a <code>select</code> element with the <code>multiple</code> attribute set), <code>.val()</code> returns an array containing the value of each selected option. <strong>As of jQuery 3.0</strong>, if no options are selected, it returns an empty array; <strong>prior to jQuery 3.0</strong>, it returns <code>null</code>.</p>
|
16 |
| - <p>For selects, checkboxes and radio buttons, you can also use the <a href="/selected-selector/">:selected</a> and <a href="/checked-selector/">:checked</a> selectors to get at values. For example:</p> |
| 16 | + <p>For selects, checkboxes and radio buttons, you can use <a href="/checked-selector/">:checked</a> to select the right elements. For example:</p> |
17 | 17 | <pre><code>
|
| 18 | +// Get the value from the selected option in a dropdown |
| 19 | +$( "select#foo option:checked" ).val(); |
18 | 20 |
|
19 |
| -// Get the value from a dropdown select |
20 |
| -$( "select.foo option:selected").val(); |
21 |
| - |
22 |
| -// Get the value from a dropdown select even easier |
23 |
| -$( "select.foo" ).val(); |
| 21 | +// Get the value from a dropdown select directly |
| 22 | +$( "select#foo" ).val(); |
24 | 23 |
|
25 | 24 | // Get the value from a checked checkbox
|
26 |
| -$( "input:checkbox:checked" ).val(); |
| 25 | +$( "input[type=checkbox][name=bar]:checked" ).val(); |
27 | 26 |
|
28 | 27 | // Get the value from a set of radio buttons
|
29 |
| -$( "input:radio[name=bar]:checked" ).val(); |
| 28 | +$( "input[type=radio][name=baz]:checked" ).val(); |
30 | 29 | </code></pre>
|
31 | 30 | <div class="warning">
|
32 | 31 | <p><strong>Note: </strong> At present, using <code>.val()</code> on <code><textarea></code> 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:</p>
|
@@ -131,11 +130,11 @@ $( "input" )
|
131 | 130 | <p>Setting values using this method (or using the native <code>value</code> property) does not cause the dispatch of the <code>change</code> event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call <code>.trigger( "change" )</code> after setting the value.</p>
|
132 | 131 | <p>The <code>.val()</code> 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: </p>
|
133 | 132 | <pre><code>
|
134 |
| -$( "input:text.items" ).val(function( index, value ) { |
135 |
| - return value + " " + this.className; |
| 133 | +$( "input[type=text].tags" ).val(function( index, value ) { |
| 134 | + return value.trim(); |
136 | 135 | });
|
137 | 136 | </code></pre>
|
138 |
| - <p>This example appends the string " items" to the text inputs' values.</p> |
| 137 | + <p>This example removes leading and trailing whitespace from the values of text inputs with a "tags" class.</p> |
139 | 138 | </longdesc>
|
140 | 139 | <example>
|
141 | 140 | <desc>Set the value of an input box.</desc>
|
|
0 commit comments