# Метод val

Метод `val` позволяет получать и изменять текущее значение элемента.

## Синтаксис

Так мы можем получить текущее значение первого элемента в наборе:

`$(селектор).val();`

Метод `val` в основном используется, чтобы получать значения элементов формы, таких как: `input`, `select` и `textarea`. Если он вызван на пустой коллекции, то вернет `undefined`. При работе с `select` с установкой атрибута `multiple`, метод вернет массив значений каждого выбранного `option`. Если ни один из них не выбран, то вернется пустой массив. Так мы можем установить значение каждого элемента в наборе. В качестве параметра можно передавать строку, массив или число:

`$(селектор).val(значение);`

Применение функции к каждому элементу в наборе. Функция принимает первым параметром текущий номер в наборе, а вторым - его текущее значение:

`$(селектор).val(имя атрибута, function(номер в наборе, текущее значение));`

## Пример

В следующем примере давайте получим значения, вводимые в инпут, и выведем их ниже в абзац:

`<input type="text" value="text"> <p></p>` `p { color: green; margin: 8px; }` `$('input').keyup(function() { let value = $(this).val(); $('p').text(value); }).keyup();`

## Пример

А теперь с помощью метода `val` мы будем записывать значения кнопок, которые мы будем нажимать, в расположенный ниже инпут:

`<div> <button>one</button> <button>two</button> <button>three</button> <button>four</button> </div> <input type="text" value="click buttons">` `button { margin: 4px; cursor: pointer; } input { margin: 4px; color: green; }` `$('button').click(function() { let text = $(this).text(); $('input').val(text); });`

## Смотрите также

- метод `attr`,
  который позволяет работать с атрибутами элементов
- метод `prop`,
  который позволяет работать со свойствами элементов

←→
↑