Работа с атрибутом value
Метод позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута value; для списков выбора (select) – значение value выбранного элемента (в случае множественного выбора – массив значений); в случае с textarea, метод .val() будет работать непосредственно с содержимым тега textarea. Метод имеет три варианта использования:
Примеры использования:
$("#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~