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