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

24/10/2020 17:14

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

Содержание:

метод .is();
метод .prop();
1. отметить/снять (checked);
2. деактивация чекбокса (disabled);
метод .trigger() - имитация клика по чекбоксу;
селектор :checked - найти все выбранные checkbox/radio;
свойство .length - подсчёт количества выбранных чекбоксов;
атрибут «disabled» - запрет отправки формы без выбора чекбокса;
массив значений выбранных чекбоксов;
свойство .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 () {
    $(container).html('');

    $('input:checked').each(function () {
        $(container).append( $(this).val() + " " );
    });
});

Нативный JavaScript.

const inputs = document.querySelectorAll('input');
const container = document.querySelector('.container');

inputs.forEach(el => {
    el.addEventListener('click', () => {
        container.textContent = '';
        let input_checkeds = document.querySelectorAll('input:checked');

        input_checkeds.forEach(el_checked => {
            container.insertAdjacentHTML('beforeend', el_checked.value);
        });
    });
});

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

Нативный JavaScript.

const checkbox = document.querySelector('#cheched');
const btn_submit = document.querySelector('.form__submit');

checkbox.addEventListener('change', () => {
    if ( checkbox.checked ) {
        btn_submit.removeAttribute('disabled');
    } else {
        btn_submit.setAttribute('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

const checkbox = document.querySelector('.checkboxClass');

checkbox.addEventListener('change', function () {
    if ( this.checked ) {
        console.log('checked');
    } else console.log('unchecked');
})

Чекбокс