Checkbox Checked — Проверка Состояния Чекбокса ✔️
В данной статье мы разберём различные способы проверки состояния чекбоксов. Это необходимо для эффективной работы с элементами форм.
Содержание:
- метод .is();
- метод .prop();
- метод .trigger();
- селектор :checked;
- свойство .length;
- атрибут «disabled»;
- массив значений выбранных чекбоксов;
- свойство .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");
}
})
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (3)
- Тимур
- Only to top
- Шодлик