Pro jQuery

Адам Фриман

Работа с элементами form

Можно получить и установить значение для элементов form (таких как input), используя метод val, который описан в таблице 8-7.

В листинге 8-27 показано, как можно использовать метод val, чтобы получить значение первого элемента в объекте jQuery. В этом скрипте я использовал метод each, таким образом я могу перечислить значения набора элементов input в документе.

<script type="text/javascript">
	$(document).ready(function () {
		$('input').each(function (index, elem) {
			console.log("Name: " + elem.name + " Val: " + $(elem).val());
		});
	});
</script>

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

Name: astor Val: 0
Name: daffodil Val: 0
Name: rose Val: 0
Name: peony Val: 0
Name: primula Val: 0
Name: snowdrop Val: 0

Добавление значений элементам form

Можно использовать метод val, чтобы установить значение для всех элементов в объекте jQuery, если просто передать нужно значение в качестве аргумента этому методу. В листинге 8-28 представлен пример.

<script type="text/javascript">
	$(document).ready(function () {
		$("<button>Set Values</button>").appendTo("#buttonDiv").click(setValues);
		function setValues(e) {
			$('input').val(100);
			e.preventDefault();
		}
	});
</script>

В этом скрипте я добавил в документ элемент button и указал, что при нажатии этой кнопки должна быть вызвана функция setValues. Функция выбирает в документе все элементы input и использует метод val, чтобы установить их значения на 100. Результат можно увидеть на рисунке 8-17.

Рисунок 8-17: Использование метода val для добавления значений элементам

Добавление значений элементам form с использованием функции

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

<script type="text/javascript">
	$(document).ready(function () {
		$('input').val(function (index, currentVal) {
			return (index + 1) * 100;
		});
	});
</script>

В этом примере я устанавливаю значения, основываясь на индексном аргументе. Результат можно увидеть на рисунке 8-18.

Рисунок 8-18: Динамическое добавление значений с использованием метода val с функцией

Подписаться

или RSS канал: