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

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() );
});

Вы выбрали _

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

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

Вы выбрали _

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')
})

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

admin