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

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

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

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

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

HTML

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

Мы будем использовать 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.

<label>
    <input type="radio" value="HTML" name="radio input">
    HTML
</label>
<label>
    <input type="radio" value="CSS" name="radio input">
    CSS
</label>
<label>
    <input type="radio" value="JavaScript" name="radio input">
    JavaScript
</label>

<div id="outputField"></div>

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

HTML CSS JavaScript

Вы выбрали _

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

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

PHP WordPress

Вы выбрали _

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

<input type="checkbox" value="1" name="name" class="count-checked">
<input type="checkbox" value="2" name="name" class="count-checked">
<input type="checkbox" value="3" name="name" class="count-checked">
<input type="checkbox" value="4" name="name" class="count-checked">

<div id="outputField"></div>

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

const myCount = function() {
    $('#outputField').html( $('.count-checked: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. Массив значений выбранных чекбоксов

<input type="checkbox" name="technology" value="PHP" class="array-checked">
<input type="checkbox" name="technology" value="JS" class="array-checked">
<input type="checkbox" name="technology" value="CSS" class="array-checked">

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

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

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

    console.log(arrayChecked);
});

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

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

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

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

HTML

<input type="checkbox" class="checkboxClass">

JavaScript

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

Чекбокс