Checkbox Checked - Проверка Состояния Чекбокса ✔️

В данной статье мы разберём различные способы проверки состояния чекбоксов. Это необходимо для эффективной работы с элементами форм.

1. Проверка checkbox на checked - метод .is()
2. Проверка checkbox/radio на состояние (выбран/не выбран) - метод .prop()
   1. Отметить / снять checked
   2. Деактивация чекбокса
3. Имитация клика по чекбоксу
4. Найти все выбранные checkbox / radio - селектор :checked
5. Подсчёт количества выбранных чекбоксов
6. Запрет отправки формы без выбора чекбокса
7. Массив значений выбранных чекбоксов
8. Проверка checkbox на checked на чистом JavaScript

Исходные данные.

<input type="checkbox" id="checkbox_check">

1. Проверка checkbox на checked - метод .is()

Сначала научимся определять при клике состояние текущего checkbox (checked / unchecked).

Мы будет использовать jQuery.

$('#checkbox_check').on('click', function () {
    if ( $(this).is(':checked') ) {
        // checkbox checked

    } else {
        // checkbox unchecked

    }
})

Чекбокс _

Т.о. при клике на чекбокс, мы отлавливаем событие click у текущего checkbox $(this) и с помощью метода .is() мы проверяем наличие псевдокласса :checked.

2. Проверка checkbox/radio на состояние (выбран/не выбран) - метод .prop()

Воспользуемся методом .prop() для проверки состояния checkbox или radio input.

$('#checkbox_check').on('click', function () {
    let checkboxStatus = $(this).prop('checked')
    console.log(checkboxStatus)
})

Данный код возвращает true или false при нажатии на чекбокс или радио input.

Состояние чекбокса: _

Чтобы сразу выполнять необходимые действия, добавим оператор if.

$('#checkbox_check').on('click', function () {
    if ( $(this).prop('checked', true) ) {
        // ваш код

    }
})

2.1 Отметить / снять checked

Также при помощи метода .prop() можно отметить (или снять состояние checked).

// добавим checked

$('#checkbox_check').prop('checked', true)

// удалим состояние checked

$('#checkbox_check').prop('checked', false)

// добавим состояние checked для всех чекбоксов

$('input:checkbox').prop('checked', true);

// удалим checked для всех чекбоксов

$('input:checkbox').prop('checked', false);

2.2 Деактивация чекбокса

Чтобы деактивировать/активировать чекбокс, воспользуйтесь следующим кодом.

// отключаем чекбокс

$('#checkbox_check').prop('disabled', true)

// включаем чекбокс

$('#checkbox_check').prop('disabled', false)

3. Имитация клика по чекбоксу

Чтобы имитировать клик по чекбоксу, воспользуйтесь следующим кодом.

$('#checkbox_check').trigger('click');

4. Найти все выбранные checkbox / radio - селектор :checked

При помощи селектора :checked найдём все выбранные checkbox / radio.

Пример с radio input.

$('input').on('click', function() {
    $('#outputField').text('Вы выбрали ' + $('input:checked').val() );
});

Вы выбрали _

Теперь рассмотрим пример с input type="checkbox", но это также отлично работает и с radio input.

$('input').on('click', function() {
    $('input:checked').each(function(){
        console.log( $(this).val() )
    });
});

Вы выбрали _

5. Подсчёт количества выбранных чекбоксов

Чтобы узнать количество выбранных checkbox, будем использовать .length.

const myCount = function() {
    $('#outputField').html( $('input:checked').length + ' чекбоксов выбрано вами.' );
};
myCount();

$('input').on('click', myCount);

Вы выбрали _ checkbox

6. Запрет отправки формы без выбора чекбокса

Создадим форму, отправить данные которой пользователь сможет только после выбора checkbox.

Структура.

<form>
    <input type='text'>
    <input type='email'>
    <input type="checkbox" id="cheched">
    <button class="form__submit" type='submit' disabled >Нажать</button>
</form>

Работа с JavaScript. Проверка checkbox на checked.

$('#cheched').on('change', function () {
    if ( $('#cheched').prop('checked') ) {
        $('.form__submit').attr('disabled', false);
    } else {
        $('.form__submit').attr('disabled', true);
    }
});

Как вы помните из 2 примера, .prop('checked') возвращает true или false - то что нам и нужно.

Результат.

7. Массив значений выбранных чекбоксов

Получим массив значений из выбранных чекбоксов.

$('.checkboxClass').on('change', function () {
    const arrayChecked = [];

    $('.checkboxClass:checked').each(function() {
        arrayChecked.push($(this).val());
    });

    console.log(arrayChecked);
});

Значения (value) чекбоксов: _

Возможно вам так же будет интересна статья про стилизацию чекбоксов.

8. Проверка checkbox на checked на чистом JavaScript

Используя чистый JavaScript определим состоние чекбокса.

document.querySelector('.checkboxClass').addEventListener('change', function () {
    if ( this.checked ) {
        console.log('checked')
    } else console.log('unchecked')
})

Состояние чекбокса: _