- Checkbox Checked — Проверка Состояния Чекбокса ✔️
- 1. Проверка checkbox на checked — метод .is()
- 2. Проверка checkbox/radio на состояние (выбран/не выбран) — метод .prop()
- 2.1 Отметить / снять checked
- 2.2 Деактивация чекбокса
- 3. Имитация клика по чекбоксу
- 4. Найти все выбранные checkbox / radio — селектор :checked
- 5. Подсчёт количества выбранных чекбоксов
- 6. Запрет отправки формы без выбора чекбокса
- 7. Массив значений выбранных чекбоксов
- 8. Проверка checkbox на checked на чистом JavaScript
Checkbox Checked — Проверка Состояния Чекбокса ✔️
В данной статье мы разберём различные способы проверки состояния чекбоксов. Это необходимо для эффективной работы с элементами форм.
1. Проверка checkbox на checked — метод .is()
Сначала научимся определять при клике состояние текущего checkbox (checked / unchecked).
Мы будем использовать jQuery.
Т.о. при клике на чекбокс, мы отлавливаем событие click у текущего checkbox $(this) и с помощью метода .is() мы проверяем наличие псевдокласса :checked .
2. Проверка checkbox/radio на состояние (выбран/не выбран) — метод .prop()
Воспользуемся методом .prop() для проверки состояния checkbox или radio input.
Данный код возвращает true или false при нажатии на чекбокс или радио input.
Состояние чекбокса: _
Чтобы сразу выполнять необходимые действия, добавим оператор if .
2.1 Отметить / снять checked
Также при помощи метода .prop() можно отметить (или снять состояние checked).
2.2 Деактивация чекбокса
Чтобы деактивировать/активировать чекбокс, воспользуйтесь следующим кодом.
3. Имитация клика по чекбоксу
Чтобы имитировать клик по чекбоксу, воспользуйтесь следующим кодом.
4. Найти все выбранные checkbox / radio — селектор :checked
При помощи селектора :checked найдём все выбранные checkbox / radio.
Пример с radio input.
HTML CSS JavaScript
Теперь рассмотрим пример с input type=»checkbox», но это также отлично работает и с radio input.
5. Подсчёт количества выбранных чекбоксов
Чтобы узнать количество выбранных checkbox, будем использовать .length .
Вы выбрали _ checkbox
6. Запрет отправки формы без выбора чекбокса
Создадим форму, отправить данные которой пользователь сможет только после выбора checkbox.
Работа с JavaScript. Проверка checkbox на checked.
Как вы помните из 2 примера, .prop(‘checked’) возвращает true или false — то что нам и нужно.
7. Массив значений выбранных чекбоксов
Получим массив значений из выбранных чекбоксов.
Значения (value) чекбоксов: _
Возможно вам так же будет интересна статья про стилизацию чекбоксов.
8. Проверка checkbox на checked на чистом JavaScript
Используя чистый JavaScript определим состоние чекбокса.
Источник
