Как получить значение input с помощью jQuery и атрибута value
jQuery - это популярная javascript библиотека, которая упрощает работу с DOM и AJAX. Одной из распространенных задач является получение значения элемента input или изменение его. В данной статье мы подробно разберем, как можно работать со значениями элементов ввода в jQuery с помощью метода val().
Основы работы с атрибутом value в jQuery
У элементов формы, таких как input, select и textarea есть специальный атрибут value, в котором хранится текущее значение элемента. Например, для текстового поля это будет введенный текст, для списка select - значение выбранной опции.
В jQuery для получения и изменения значений используется метод val(). Он может вызываться без параметров, чтобы просто вернуть текущее значение:
$("input").val(); А может принимать значение, которое будет установлено для элемента:
$("input").val("new value"); Давайте рассмотрим простой пример получения значения текстового поля:
<input id="username" type="text"> let userName = $("#username").val(); Если метод вызывается для jQuery объекта, содержащего несколько элементов, то вернется значение только первого элемента в этом объекте. Чтобы обработать все элементы, нужно использовать циклы вроде each().
Также val() можно использовать для установки значений сразу для нескольких элементов:
$("input").val("test"); Это установит значение "test" для всех найденных input на странице. Рассмотрим подробнее особенности работы с разными типами элементов.
Работа с текстовыми полями
Текстовые поля в HTML создаются с помощью тега <input type="text">. Чтобы получить или изменить их значение в jQuery, используется стандартный метод val().
Для получения значения текстового поля нужно воспользоваться любым подходящим селектором - по id, классу, атрибутам:
// По id let val = $("#username").val(); // По классу let vals = $(".text-input").val(); // По атрибуту name let val = $("input[name='email']").val(); Если селектор находит несколько элементов, то возвращается значение только первого. Чтобы получить все значения, используем each():
let values = []; $(".text-input").each(function() { values.push($(this).val()); }); Для установки значений текстовых полей достаточно передать нужное значение в метод val():
$("#username").val("john"); Можно изменить регистр вводимого значения:
$("#username").val(function(index, oldVal) { return oldVal.toUpperCase(); }); Добавить префикс или суффикс:
$("#phone").val(function(i, oldVal) { return "+7 (" + oldVal + ")"; }); Перед установкой значения имеет смысл его проверить, чтобы избежать ошибок:
$("#age").val(function(i, oldVal) { let newVal = parseInt(oldVal); if (newVal >= 18 && newVal <= 99) { return newVal; } else { return oldVal; } }); Также полезно знать, что для очистки текстового поля достаточно установить пустую строку:
$("#username").val(""); В целом работа с текстовыми input в jQuery довольно простая благодаря универсальному методу val(). В следующих разделах рассмотрим особенности других элементов форм.
Работа со списками select в jQuery
Для работы со списками в jQuery также используется метод val(). Рассмотрим особенности одиночного и множественного списков.
Одиночный список
Для получения значения выбранной опции одиночного списка select используем:
let selectedVal = $("#select").val(); Это вернет значение атрибута value у выбранного пункта списка.
Чтобы получить отображаемый текст опции, а не value:
let selectedText = $("#select option:selected").text(); Для установки выбранного пункта по его значению:
$("#select").val("1"); А по тексту:
$("#select").val("Опция 1"); Множественный список
Для select с атрибутом multiple метод val() возвращает массив значений:
let values = $("#multiSelect").val(); // ["1", "2"] Чтобы установить выбранные значения:
$("#multiSelect").val(["1", "3"]); Каскадные зависимые списки
Распространенный прием, когда опции одного списка зависят от выбора в другом списке. Это можно реализовать в jQuery так:
$("#select1").change(function() { let val1 = $(this).val(); $.get("/options?id=" + val1, function(data) { let options = ""; for(let val of data) { options += "<option value='" + val + "'>" + val + "</option>"; } $("#select2").html(options); }) }) При изменении первого списка делается ajax запрос за опциями для второго списка, и происходит обновление html.
Работа с radio и checkbox
"input value jquery" позволяет также управлять состоянием чекбоксов и радиокнопок. Рассмотрим основные моменты.
Для радиокнопок в группе удобно использовать селектор по имени:
let checkedVal = $("input[name='group1']:checked").val(); А для чекбоксов так получим массив значений:
let checkedVals = $("input[name='group2']:checked").map(function() { return $(this).val(); }).get(); Для установки состояния:
$("input[value='val1']").prop("checked", true); В целом принцип работы такой же как и с другими элементами формы в jQuery.