Работа с атрибутом value

.val()

Метод позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута value; для списков выбора (select) – значение value выбранного элемента (в случае множественного выбора – массив значений); в случае с textarea, метод .val() будет работать непосредственно с содержимым тега textarea. Метод имеет три варианта использования:

.val():string,array1.0
возвращает значение атрибута value у выбранного элемента формы. Если выбрано несколько элементов, то значение будет взято у первого. В случае, элемента формы <select multiple="multiple"> возвращается массив всех выбранных значений.
.val(newVal):jQuery1.0
атрибуту value будет присвоено значение newVal, у всех выбранных элементов.
.val(function(index, newVal)):jQuery1.4
атрибуту value будет присвоено значение, возвращенное пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index — позиция элемента в наборе, newVal — текущее значение атрибута value у элемента.

Примеры использования:

$("#surname").val() вернет значение элемента с идентификатором surname
$(".surname").val() вернет значение первого элемента с классом surname
$("input[name='surname']").val() вернет значение первого элемента формы с атрибутом name равным surname
$(".surname").val("Задерищенко") присвоит значение "Задерищенко" всем элементам формы с классом surname

Замечание: важно отметить, что используя метод .val(), вы получите значения атрибута value, только у первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

В действии

Если в одном из текстовых полей, в которые нужно записывать любимые продукты, значение окажется отличным от "Шоколад", то пользователь получит замечание:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
   input{
      width:240px;
      margin:3px;
   }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~b~gt~Укажите любимые продукты:~lt~/b~gt~~lt~br~gt~
  ~lt~input type="text" value="Колбаса" /~gt~~lt~br~gt~
  ~lt~input type="text" value="Шоколад" /~gt~~lt~br~gt~
  ~lt~input type="text" value="Пиво" /~gt~~lt~br~gt~
  ~lt~input type="text" value="Спагетти" /~gt~ 

  ~lt~div id="state"~gt~ ~lt~/div~gt~
~lt~script~gt~
    $("input:text").val(
	  function(index, x){
	    if(x != "Шоколад")
	    	return "Шоколад лучше чем " + x;
	    else
	    	return x;
	  }
	);
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • значение элементов формы
  • получить значение элемента формы
  • изменить значение элементов формы
  • .val()
  • val()