Элементы формы

Веб-программирование --- jQuery --- Элементы формы

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Для получения и изменения значений элементов формы (таких, как input) используется метод val(), описанный в таблице ниже:

Пример использования метода val() для получения значения первого из элементов, содержащихся в объекте jQuery, приведен ниже. Метод each() используется для перебора значений всех элементов input, содержащихся в документе:

$(function() {
        
    $('input').each(function(index, elem) {
         console.log("Имя: " + elem.name + " Значение: " + $(elem).val());
    });
	
});

На консоль выводится следующий результат:

Изменение значений элементов формы

Метод val() можно использовать для изменения значений всех элементов, содержащихся в объекте jQuery, передавая ему требуемое значение в качестве аргумента. Соответствующий пример приведен ниже:

$(function() {
        
     $("<button>Установить значения</button>").appendTo("#buttonDiv").click(setValues);       
    
     function setValues(e) {
         $('input').val(100);
         e.preventDefault();
     }  
	
});

В этом сценарии в документ добавляется кнопка, после щелчка на которой вызывается функция setValues(). Эта функция выбирает все элементы input в документе и устанавливает их значения равными 100 с помощью метода val(). Результат представлен на рисунке:

Изменение значений элементов формы с помощью функции

Как несложно догадаться, для изменения значений с помощью метода val() можно использовать также функцию. Аргументами этой функции являются позиция элемента в наборе и его текущее значение. Переменная this ссылается на объект HTMLElement, представляющий обрабатываемый элемент. Используя этот способ, можно устанавливать значения элементов динамически, как показано в примере ниже:

$(function() {
        
    $('input').val(function(index, currentVal) {
        return (index + 1) * 100;
    });   
	
});

В этом примере значения элементов устанавливаются на основании значения аргумента index, указывающего позицию элемента в выбранном наборе. Результат представлен на рисунке: