.val()

Получение текущего значения первого элемента в наборе сопоставленных элементов или установка значения каждого сопоставленного элемента.

Содержание:

.val()
- .val()
.val( значение )
- .val( значение )
- .val( функция )

.val()Возвращает: Строка или Число или Массив

Описание: Получение текущего значения первого элемента в наборе сопоставленных элементов.

версия добавлена: 1.0.val()
- Этот метод не принимает аргументов.

Метод .val() в основном используется для получения значений элементов формы, таких как input, select и textarea. При вызове на пустом наборе, он возвращает undefined.

Если первый элемент в наборе — select-multiple (т.е., элемент select с атрибутом multiple), .val() возвращает массив, содержащий значения каждого выбранного элемента. Начиная с jQuery 3.0, если нет выбранных элементов, возвращается пустой массив; до jQuery 3.0 возвращалось null.

Для элементов select, checkbox и radio buttons можно использовать :checked для выбора нужных элементов. Например:

// 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();

Примечание: В настоящее время при использовании .val() с элементами <textarea> символы возврата каретки удаляются из значения, полученного от браузера. Однако при отправке этого значения на сервер через XHR символы возврата каретки сохраняются (или добавляются браузерами, которые не включают их в исходное значение). Обходной путь для этой проблемы может быть реализован с использованием valHook следующим образом:

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

Примеры:

Получение одиночного значения из одного select и массива значений из множественного select и вывод их значений.

<!doctype html>
<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.7.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" ).on( "change", displayVals );
displayVals();
</script>
 
</body>
</html>

Демо:

Получение значения из поля ввода.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<input type="text" value="some text">
<p></p>
 
<script>
$( "input" )
  .on( "keyup", function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  } )
  .trigger( "keyup" );
</script>
 
</body>
</html>

Демо:

.val( значение )Возвращает: jQuery

Описание: Установка значения каждого элемента в наборе сопоставленных элементов.

версия добавлена: 1.0.val( значение )
- значение
  
  Тип: Строка или Число или Массив
  
  Строка текста, число или массив строк, соответствующих значению каждого сопоставленного элемента для установки как выбранного/проверенного.
версия добавлена: 1.4.val( функция )
- функция
  
  Тип: Функция( Целое число индекс, Строка значение ) => Строка
  
  Функция, возвращающая значение для установки. this — текущий элемент. Получает позицию индекса элемента в наборе и старое значение в качестве аргументов.

Этот метод обычно используется для установки значений полей формы.

val() позволяет передавать массив значений элементов. Это полезно при работе с объектом jQuery, содержащим элементы, такие как <input type="checkbox">, <input type="radio">, и <option> внутри <select>. В этом случае input и option с value, совпадающим с одним из элементов массива, будут проверены или выбраны, а те, у которых value не совпадает ни с одним из элементов массива, будут сняты с проверки или выбора в зависимости от типа. В случае <input type="radio">, которые являются частью группы радио, и <select>, любой ранее выбранный элемент будет снят с выбора.

Установка значений с помощью этого метода (или с использованием свойства value) не вызывает отправку события change. По этой причине соответствующие обработчики событий не будут выполнены. Если вы хотите их выполнить, вы должны вызвать .trigger( "change" ) после установки значения.

Метод .val() позволяет установить значение, передав функцию. Начиная с jQuery 1.4, функция получает два аргумента: текущий индекс элемента и его текущее значение:

$( "input[type=text].tags" ).val(function( index, value ) {
  return value.trim();
});

Этот пример удаляет начальные и конечные пробелы из значений текстовых полей с классом "tags".

Примеры:

Установка значения поля ввода.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
$( "button" ).on( "click", function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
</script>
 
</body>
</html>

Демо:

Использование аргумента функции для изменения значения поля ввода.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Type something and then click or tab out of the input.</p>
<input type="text" value="type something">
 
<script>
$( "input" ).on( "blur", function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});
</script>
 
</body>
</html>

Демо:

Установка значения для одного select, множественного select, checkboxes и радиокнопки.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  body {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<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>
 
<br>
<input type="checkbox" name="checkboxname" value="check1"> check1
<input type="checkbox" name="checkboxname" value="check2"> check2
<input type="radio" name="r" value="radio1"> radio1
<input type="radio" name="r" value="radio2"> radio2
 
<script>
$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input").val([ "check1", "check2", "radio1" ]);
</script>
 
</body>
</html>

Содержание:

.val()Возвращает: Строка или Число или Массив

версия добавлена: 1.0.val()

Примеры:

Демо:

Демо:

.val( значение )Возвращает: jQuery

версия добавлена: 1.0.val( значение )

версия добавлена: 1.4.val( функция )

Примеры:

Демо:

Демо:

Демо: