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

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

Содержание:

  1. метод .is();
  2. метод .prop();
    1. отметить/снять (checked);
    2. деактивация чекбокса (disabled);
  3. метод .trigger();
  4. селектор :checked;
  5. свойство .length;
  6. атрибут «disabled»;
  7. массив значений выбранных чекбоксов;
  8. свойство .checked - проверка checkbox на checked на чистом JavaScript.

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

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

HTML:

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

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

$(".checkbox").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").on("click", function () {
    let checkboxStatus = $(this).prop("checked");

    console.log(checkboxStatus);
})

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

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

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

$(".checkbox").on("click", function () {
    if ($(this).prop("checked") === true) {
        // ваш код
    }
})

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

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

// добавим checked
$(".checkbox").prop("checked", true)

// удалим состояние checked
$(".checkbox").prop("checked", false)

// добавим состояние checked для всех чекбоксов
$("input:checkbox").prop("checked", true);

// удалим checked для всех чекбоксов
$("input:checkbox").prop("checked", false);

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

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

// отключаем чекбокс
$(".checkbox").prop("disabled", true)

// включаем чекбокс
$(".checkbox").prop("disabled", false)

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

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

$(".checkbox").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="output_field"></div>
$("input").on("click", function () {
    $("#output_field").text("Вы выбрали " + $("input:checked").val());
});

Вы выбрали _

Теперь рассмотрим пример с 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_checks = document.querySelectorAll("input:checked");

        input_checks.forEach(el_checked => {
            container.insertAdjacentHTML("beforeend", el_checked.value);
        });
    });
});

Вы выбрали _

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="output_field"></div>

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

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

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

Вы выбрали _ checkbox

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

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

Структура.

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

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

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

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

Нативный JavaScript:

const checkbox = document.getElementById("checked");
const btn_submit = document.querySelector(".form__submit");

checkbox.addEventListener("change", () => {
    if (checkbox.checked) {
        btn_submit.removeAttribute("disabled");
    } else {
        btn_submit.setAttribute("disabled", true);
    }
});

Результат:

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

HTML:

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

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

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

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

HTML:

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

JavaScript:

const checkbox = document.querySelector(".checkbox");

checkbox.addEventListener("change", function () {
    if (this.checked) {
        console.log("checked");
    } else {
        console.log("unchecked");
    }
})
Git SSH Windows - пошаговое руководство События Формы