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

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

Метод имеет три варианта использования:

.val()

Возвращает значение атрибута value у выбранного элемента формы. Если выбрано несколько элементов, то значение будет взято у первого. В случае, элемента формы <select multiple="multiple"> возвращается массив всех выбранных значений.

Для элементов select и чекбоксов, мы можем так же использовать :selected и :checked, например:

// Получаем значение из элемента select
$( "select.foo option:selected").val();
 
// Альтернативный способ
$( "select.foo" ).val();
 
// Получаем значение из чекбокса
$( "input:checkbox:checked" ).val();
 
// Получаем значение из группы радиокнопок
$( "input:radio[name=bar]:checked" ).val();
.val( newValue )

Устанавливает значение атрибута value.

  • newValue – значение, которое будет присвоено атрибуту;
.val( function )

Присваивает значение атрибута value , возвращенное пользовательской функцией.

  • function (index, value)
    • index – позиция элемента в наборе;
    • value – текущее значение атрибута value у элемента

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

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

Пример установки значения возвращенного функцией

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

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *