Мы подготовили для вас сборник примеров работы jquery с checkbox.
Как проверить состояние checkbox?
Если вы хотите проверить состояние чекбокса, просто используйте свойство checked. Например:
<input type="checkbox" id="checkbox"> checkbox
<script>
if ($('#checkbox').is(':checked')){
alert('Включен');
} else {
alert('Выключен');
}
</script>Для определения состояния чекбокса можно воспользоваться свойством checked. Если значение этого свойства равно true, то чекбокс отмечен, иначе — не отмечен.
Как отменить и снять checkbox?
Чтобы снять галочку с чекбокса, нужно установить значение свойства checked в false:
// Отметить checkbox
$('#checkbox').prop('checked', true);
// Снять checkbox
$('#checkbox').prop('checked', false);Как отменить и снять все checkbox на странице?
Можно использовать цикл each для обхода всех чекбоксов на странице и установить у них checked в false.
// Отметить все
$('body input:checkbox').prop('checked', true);
// Снять все
$('body input:checkbox').prop('checked', false);
Как инвертировать checkbox?
На примере селектор :checkbox вы узнаете как инвертировать значение чекбоксов в Jquery.
<p id="controls">
<input type="checkbox">checkbox 1
<input type="checkbox">checkbox 2
<input type="checkbox">checkbox 3
</p>
<input type="checkbox" id="checkbox"> Отметить/снять все
<script>
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$('#controls input:checkbox').prop('checked', true);
} else {
$('#controls input:checkbox').prop('checked', false);
}
});
</script>Как сделать программный клик по checkbox?
Имитация клика по чекбоксу с запуском повешенных на него событий.
$('#checkbox').trigger('click');trigger в Jquery выполнить все прикрепленные события к элементу.
Как узнать количество отмеченных checkbox?
Можно использовать метод length и селектор :checked для подсчета отмеченных checkbox.
var count = $(':checkbox:checked').length;Как сделать переобход всех checkbox?
$('input:checkbox:checked').each(function(){
alert($(this).val());
});Используйте цикл для перебора всех чекбоксов на странице.
Как получить из всех отмеченных checkbox массив значений аттр value?
Используя пример выше, создайте массив и добавляйте в него новые элементы при помощи метода push
var checked = [];
$('input:checkbox:checked').each(function() {
checked.push($(this).val());
});Как получить неотмеченные чекбоксы?
Псевдо селектор :not() в паре :checked инвертирую поиск отмеченных чекбоксов на неотмеченные.
$('input:checkbox:not(:checked)').each(function(){
alert($(this).val());
});Как показать или скрыть блок контента по клику на checkbox?
Используйте обработчик события click чекбокса для изменения свойства display блока контента, методом .show(), .fade() или .slideToggle().
<input type="checkbox" id="checkbox"> Показать скрытый текст
<div id="text" style="display: none;">Какой-то текст....</div>
<script>
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$('#text').show(100);
} else {
$('#text').hide(100);
}
});
</script>Этот способ часто использую при создании табов на странице.
Как разблокировать кнопку при клике на checkbox?
Используйте обработчик события click чекбокса для изменения свойства disabled кнопки.
<input type="checkbox" id="checkbox"> Правила мною прочитаны и приняты
<button id="btn" disabled="disabled">Продолжить регистрацию</button>
<script>
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$('#btn').removeAttr('disabled');
} else {
$('#btn').attr('disabled', 'disabled');
}
});
</script>Это решение можно увидеть в формах «отметьте чекбокс если согласны с правилами»
Как сменить цвет текста при выборе чекбокса?
Используйте метод .addClass() или .css() для изменения стиля чекбокса при помощи jquery.
<label><input type="checkbox"> checkbox 1</label>
<label><input type="checkbox"> checkbox 2</label>
<label><input type="checkbox"> checkbox 3</label>
<script>
// Добавление класса:
$('input:checkbox').click(function(){
if ($(this).is(':checked')) {
$(this).parent().addClass('green');
} else {
$(this).parent().removeClass('green');
}
});
// Или атрибут style:
$('input:checkbox').click(function(){
if ($(this).is(':checked')) {
$(this).parent().css('color', 'green');
} else {
$(this).parent().css('color', '#fff');
}
});
</script>Как из checkbox сделать radio?
Чтобы checkbox задать поведение radio button, мы при клике на checkbox ищем все активные checkbox группы и убираем у этих элементов галочку, у всех кроме чекбокса по которому кликнули.
<div id="group">
<input type="checkbox">checkbox 1
<input type="checkbox">checkbox 2
<input type="checkbox">checkbox 3
</div>
<script>
$('#group input:checkbox').click(function(){
if ($(this).is(':checked')) {
$('#group input:checkbox').not(this).prop('checked', false);
}
});
</script>p.s Checkbox являются независимыми. Если нужна группа, используйте элементы типа radio с общим атрибутом name.
Как блокировать checkbox?
Есть несколько способов заблокировать checkbox, самый правильный это накинуть атрибут disabled.
<div id="group" class="text-center">
<label><input class="form-check-input" type="checkbox">checkbox 1</label><br>
<label><input class="form-check-input" type="checkbox">checkbox 2</label><br>
<label><input class="form-check-input" type="checkbox">checkbox 3</label>
</div>
<script>
let selector = '#group input:checkbox';
$(selector).click(function(){
$(selector).not(this).prop('disabled', false);
if ($(this).is(':checked')) {
$(selector).not(this).prop('disabled', true);
}
});
// $('#group input:checkbox').attr('disabled', true); // Заблокировать все чекбоксы при загрузке страницы
</script>В нашем примере мы заблокировали все чекбоксы кроме выбранного 🙂
Как отправить форму по чекбоксу?
Используйте обработчик события change чекбокса для вызова метода .submit() формы.
<form action="" method="post" id="form">
<label><input type="checkbox">checkbox 1</label>
<label><input type="checkbox">checkbox 2</label>
<label><input type="checkbox">checkbox 3</label>
</form>
<script>
$('#form input[type="checkbox"]').on('change', function(){
$('#form').submit();
});
});
$('#form').on('submit', function(){
alert('send form');
});
</script>Работа с чекбоксами в JQuery предоставляет множество возможностей для взаимодействия пользователя с веб-страницей.
Будь то изменение внешнего вида, выполнение программных кликов, или сбор информации о чекбоксах.
Запомните эти приемы с JQuery, и они станут полезным инструментом при разработке сайтов.
10 Ноя 2023 
226
1 
