Использование javascript и jquery для управления checkbox

3
15584

В этой большой статье мы поговорим о том, как управлять input типа checkbox с помощью библиотеки jQuery и на чистом Javascript. Статья полноценно раскрывает тему управления состояниям checkbox checked, а также рассказывает о том, как узнать значение checkbox, как проверить значение checkbox и о том, как в зависимости от состояния чекбокса изменять элементы страниц. Все примеры буду разделены на checkbox jquery и checkbox javascript для демонстрации работы обоих способов.

Как известно, checkbox — это флажок, который используют при необходимости выбора одного или более вариантов в списке. В html checkbox является типом для атрибута type тега <input>. Таким образом, чтобы его создать используют следующую разметку:

Главным атрибутом является type="checkbox", именно он указывает на то, какого типа должен быть input. Остальные аргументы, используются для идентификации чекбокса и установки его значения для работы с ним.

Таким образом, мы создали 3 чекбоса, первый из них благодаря атрибуту checked будет выбран по умолчанию. Теперь перейдем к управлению checkbox’ами с помощью jQuery и Javascript.

Работа с checkbox с помощью jQuery

Веб-страница в своей основе служит для сбора и манипуляцией информацией переданной посетителем сайта с помощью форм, которые могут состоять из множеств видов элементов разных типов (select, textarea и input). Флажки требуют от пользователя сделать выбор определенного значения из одного или нескольких вариантов.

С помощью атрибута checked можно отметить флажок. Атрибут checked не является атрибутом языка html, он представляет из себя свойство DOM (объектная модель документа). Это значит, что данное свойство может динамически изменяться в тот момент, когда пользователь с ним взаимодействует. К таким же свойствам относится disabled, который определяет возможность взаимодействия с полем.

Для проверки, установлен ли checkbox checked используют следующий код (для примера выше):

Функция .prop() возвращает булево true, если checkbox checked и false если наоборот.

Чтобы получить значение checkbox value используется следующий код (для примера выше):

Этот код вернет значение из атрибута value установленного в чекбоксе.

Чтобы найти все checkbox на странице у которых состояние checked воспользуйтесь селектором jQuery:

Создание динамического массива для checkbox значений

Если Вам необходимо динамически хранить значения выбранных чекбоксов в массиве, например, для хранения пользовательских настроек, то это делается так (смотрите вкладку Javascript):

Как сделать checkbox как radio

Иногда необходимо, чтобы checkbox работал так же как radiobutton. Например, в интернет магазине, при выборе цвета товара, вы сверстали цветные квадратики в виде checkbox’ов. А так как цвет товара может быть только один, то необходимо изменить принцип работы флажков — убрать возможность выбора более одного флажка. Для этого используем следующее(смотрите вкладку JS):

Как ограничить выбор checkbox в группе

Допустим, имеется группа чекбоксов. Требуется ограничить количество чекбоксов, которые можно выбрать. Например, из 6 флажков, выбрать можно только 3 флажка, а остальные флажки получат статус disabled и будут заблокированы. Чтобы ограничить количество checkbox для выбора используйте следующий код:

Пример ограничения количества чекбоксов для выбора:

Работа с checkbox с помощью Javascript

По некоторым причинам разработчик может отказаться от использования библиотеки jQuery в пользу чистого javascript. В таком случае, для реализации управления чекбоксами потребуется чуть-чуть больше кода чем с jQuery, но мы сэкономим немного ресурса. Ниже представлена стандартная javascript проверка checkbox

Разберем случай обычного перехвата события нажатия на чекбокс (javascript checkbox checked), для этого используется следующий код:

Установка флажка на все checkbox в списке при нажатии на триггер.

Автоматический выбор всех чекбоксов реализуется следующим образом:

Заключение

Спасибо за внимание. Работа с checkbox не такая сложная, как многим кажется и к счастью, язык Javascript делает формы достаточно интерактивными, а также помогает программистам сделать их более простыми и легкими в использовании и на все 100% отвечающими запросам пользователей. Всего доброго!

3 КОММЕНТАРИИ

  1. if($(‘#check1’).prop(‘checked’)) {
    console.log(«Флажок установлен»);
    } esle {
    console.log(«Флажок не установлен»);
    }

    исправьте else

  2. Скопировал пример из пункта Создание динамического массива для checkbox значений. Все скопировал все прописал. А ничо не пашет. Почему?

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя