1.0 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. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.

For selects and checkboxes, you can also use the :selected and :checked selectors to get at values, for example:

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

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:

$.valHooks.textarea = {
    get: function( elem ) {
        return elem.value.replace( /\r?\n/g, "\r\n" );
    }
};

Get the single value from a single select and an array of values from a multiple select and display their values.

Single: " +
                  singleValues +
                  " Multiple: " +
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();

]]>

]]> Find the value of an input box.

]]> 1.0 A string of text or an array of strings corresponding to the value of each matched element to set as selected/checked. 1.4 A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments. Set the value of each element in the set of matched elements.

This method is typically used to set the values of form fields.

Passing an array of element values allows matching <input type="checkbox">, <input type="radio"> and <option>s inside of n <select multiple="multiple"> to be selected. In the case of <input type="radio">s that are part of a radio group and <select multiple="multiple"> the other elements will be deselected.

The .val() 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:

$('input:text.items').val(function( index, value ) {
  return value + ' ' + this.className;
});

This example appends the string " items" to the text inputs' values.

Set the value of an input box. ]]> Use the function argument to modify the value of an input box. Type something and then click or tab out of the input.

]]> Set a single select, a multiple select, checkboxes and a radio button .
check1 check2 radio1 radio2]]>