Работа с value и checked

Библиотека Cash является облегчённым аналогом jQuery, предоставляющим удобный синтаксис для работы с DOM-элементами, событиями и атрибутами. Особое внимание уделяется элементам форм, где часто требуется получение и установка значений через свойства value и checked.

Получение и установка value

Свойство value используется для работы с текстовыми полями, текстовыми областями и элементами <select>.

Получение значения:

let inputValue = $('input#username').val();
console.log(inputValue);

В этом примере метод .val() возвращает текущее значение поля с id username. Если элементов несколько, возвращается значение первого из них.

Установка значения:

$('input#username').val('Иванов');

Здесь .val() используется в качестве сеттера. Все выбранные элементы получают новое значение. Для <select> это изменяет выбранную опцию, для <textarea> — текстовое содержимое.

Работа с checked для флажков и переключателей

Свойство checked применяется к <input type="checkbox"> и <input type="radio">, позволяя проверять состояние выбора и изменять его.

Проверка состояния:

let isChecked = $('input#subscribe').prop('checked');
console.log(isChecked); // true или false

Метод .prop() используется для работы с булевыми свойствами элемента. В отличие от .attr(), .prop() корректно отражает текущее состояние элемента в DOM.

Установка состояния:

$('input#subscribe').prop('checked', true);

Все выбранные элементы становятся отмеченными. Чтобы снять отметку, передаётся false.

Отличие .val() и .prop()

  • .val() предназначен для текстовых и числовых значений элементов формы.
  • .prop('checked') предназначен для булевых свойств, отражающих текущее состояние элементов.

Для флажков и радио рекомендуется использовать именно .prop(), потому что использование .attr('checked') изменяет лишь атрибут в HTML, но не актуальное состояние в DOM.

Работа с группами элементов

При работе с несколькими чекбоксами или радио часто требуется получить массив выбранных значений:

let selectedValues = $('input[name="colors"]:checked').map(function() {
    return $(this).val();
}).get();

console.log(selectedValues);

Метод .map() создаёт массив из выбранных элементов, а .get() преобразует объект Cash в обычный массив JavaScript.

Для установки состояния нескольких флажков:

let colorsToCheck = ['red', 'blue'];
$('input[name="colors"]').each(function() {
    $(this).prop('checked', colorsToCheck.includes($(this).val()));
});

Метод .each() позволяет перебрать все элементы и динамически задать checked в зависимости от значений.

Работа с <select> и множественным выбором

Для <select multiple> свойство value можно использовать как массив:

$('select#fruits').val(['apple', 'banana']);

При чтении выбранных опций возвращается массив значений:

let selectedFruits = $('select#fruits').val();
console.log(selectedFruits); // ['apple', 'banana']

Cash корректно поддерживает как одиночный, так и множественный выбор без необходимости ручного перебора опций.

Особенности динамических изменений

Если элементы формы добавляются динамически после загрузки страницы, методы .val() и .prop() работают корректно при прямом выборе элементов через селектор. Для событий изменения состояния рекомендуется использовать делегирование через .on():

$(document).on('change', 'input[type="checkbox"]', function() {
    console.log($(this).prop('checked'));
});

Это гарантирует, что обработчик будет срабатывать для новых элементов, добавленных в DOM после инициализации скрипта.

Совмещение val() и prop() в обработчиках форм

При отправке форм часто требуется собрать данные из текстовых полей и чекбоксов одновременно:

let formData = {
    username: $('input#username').val(),
    subscribe: $('input#subscribe').prop('checked'),
    colors: $('input[name="colors"]:checked').map(function() {
        return $(this).val();
    }).get()
};
console.log(formData);

Такой подход обеспечивает единообразное извлечение данных и позволяет легко подготавливать объекты для отправки через AJAX.

Итоговое использование

  • .val() — получение и установка текстовых значений.
  • .prop('checked') — работа с состоянием флажков и радио.
  • .map().get() — сбор значений нескольких выбранных элементов.
  • .each() — установка состояния для группы элементов.
  • Делегирование событий через .on('change', selector, handler) — работа с динамическими элементами.

Методы Cash позволяют минимизировать количество кода при работе с формами, обеспечивая лаконичную и предсказуемую работу с value и checked в любых сценариях.

Оглавление