{"name":"val","type":"method","title":".val()","deprecated":null,"removed":null,"desc":"Get the current value of the first element in the set of matched elements or set the value of every matched element.","categories":["attributes","forms","manipulation/general-attributes","version/1.0","version/1.4"],"entries":[{"return":[{"type":"String"},{"type":"Number"},{"type":"Array"}],"signatures":{"added":"1.0"},"examples":[{"desc":"Get the single value from a single select and an array of values from a multiple select and display their values.","code":"\nfunction displayVals() {\n  var singleValues = $( \"#single\" ).val();\n  var multipleValues = $( \"#multiple\" ).val() || [];\n  $( \"p\" ).html( \"<b>Single:</b> \" + singleValues +\n    \" <b>Multiple:</b> \" + multipleValues.join( \", \" ) );\n}\n\n$( \"select\" ).change( displayVals );\ndisplayVals();\n","css":"\n  p {\n    color: red;\n    margin: 4px;\n  }\n  b {\n    color: blue;\n  }\n","html":"\n<p></p>\n\n<select id=\"single\">\n  <option>Single</option>\n  <option>Single2</option>\n</select>\n\n<select id=\"multiple\" multiple=\"multiple\">\n  <option selected=\"selected\">Multiple</option>\n  <option>Multiple2</option>\n  <option selected=\"selected\">Multiple3</option>\n</select>\n"},{"desc":"Find the value of an input box.","code":"\n$( \"input\" )\n  .keyup(function() {\n    var value = $( this ).val();\n    $( \"p\" ).text( value );\n  })\n  .keyup();\n","css":"\n  p {\n    color: blue;\n    margin: 8px;\n  }\n","html":"\n<input type=\"text\" value=\"some text\">\n<p></p>\n"}],"desc":"Get the current value of the first element in the set of matched elements.","longdesc":""},{"return":"jQuery","signatures":[{"added":"1.0","argument":{"type":[{"name":"String"},{"name":"Array"}],"desc":"A string of text or an array of strings corresponding to the value of each matched element to set as selected/checked.","name":"value"}},{"added":"1.4","argument":{"desc":"A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old value as arguments.","name":"function(index, value)","type":"Function"}}],"examples":[{"desc":"Set the value of an input box.","code":"\n$( \"button\" ).click(function() {\n  var text = $( this ).text();\n  $( \"input\" ).val( text );\n});\n","css":"\n  button {\n    margin: 4px;\n    cursor: pointer;\n  }\n  input {\n    margin: 4px;\n    color: blue;\n  }\n","html":"\n<div>\n  <button>Feed</button>\n  <button>the</button>\n  <button>Input</button>\n</div>\n<input type=\"text\" value=\"click a button\">\n"},{"desc":"Use the function argument to modify the value of an input box.","code":"\n$( \"input\" ).on( \"blur\", function() {\n  $( this ).val(function( i, val ) {\n    return val.toUpperCase();\n  });\n});\n","html":"\n<p>Type something and then click or tab out of the input.</p>\n<input type=\"text\" value=\"type something\">\n"},{"desc":"Set a single select, a multiple select, checkboxes and a radio button .","code":"\n$( \"#single\" ).val( \"Single2\" );\n$( \"#multiple\" ).val([ \"Multiple2\", \"Multiple3\" ]);\n$( \"input\").val([ \"check1\", \"check2\", \"radio1\" ]);\n","css":"\n  body {\n    color: blue;\n  }\n","html":"\n<select id=\"single\">\n  <option>Single</option>\n  <option>Single2</option>\n</select>\n\n<select id=\"multiple\" multiple=\"multiple\">\n  <option selected=\"selected\">Multiple</option>\n  <option>Multiple2</option>\n  <option selected=\"selected\">Multiple3</option>\n</select>\n\n<br>\n<input type=\"checkbox\" name=\"checkboxname\" value=\"check1\"> check1\n<input type=\"checkbox\" name=\"checkboxname\" value=\"check2\"> check2\n<input type=\"radio\" name=\"r\" value=\"radio1\"> radio1\n<input type=\"radio\" name=\"r\" value=\"radio2\"> radio2\n"}],"desc":"Set the value of each element in the set of matched elements.","longdesc":"\n      <p>This method is typically used to set the values of form fields. </p>\n      <p>Passing an array of element values allows matching  <code>&lt;input type=\"checkbox\"&gt;</code>, <code>&lt;input type=\"radio\"&gt;</code> and <code>&lt;option&gt;</code>s inside of n <code>&lt;select multiple=\"multiple\"&gt;</code> to be selected. In the case of <code>&lt;input type=\"radio\"&gt;</code>s that are part of a radio group and <code>&lt;select multiple=\"multiple\"&gt;</code> the other elements will be deselected.</p>\n      <p>The <code>.val()</code> method allows us to set 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>\n      <pre><code>\n$( \"input:text.items\" ).val(function( index, value ) {\n  return value + \" \" + this.className;\n});\n      </code></pre>\n      <p>This example appends the string \" items\" to the text inputs' values.</p>\n    "}]}