Работа с checkbox в JQuery

Сборник приемов JQuery для работы с чекбоксом.

1
<input type="checkbox" id="checkbox"> checkbox

<script>
if ($('#checkbox').is(':checked')){
	alert('Включен');
} else {
	alert('Выключен');
}
</script>
HTML
2
// Отметить checkbox
$('#checkbox').prop('checked', true);

// Снять checkbox
$('#checkbox').prop('checked', false);
JS
// Отметить все
$('body input:checkbox').prop('checked', true);

// Снять все
$('body input:checkbox').prop('checked', false);
JS
<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>
HTML
3

Имитация клика по чекбоксу с запуском повешенных на него событий.

$('#checkbox').trigger('click');
JS
4
var count = $(':checkbox:checked').length;
JS
5

Выбор всех отмеченных

$('input:checkbox:checked').each(function(){
	alert($(this).val());
});
JS
var checked = [];
$('input:checkbox:checked').each(function() {
	checked.push($(this).val());
});
JS
$('input:checkbox:not(:checked)').each(function(){
	alert($(this).val());
});
JS
6
<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>
HTML
7
<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>
HTML
8
<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', '#000000');
	}
});
</script>
HTML
9

Radio button из chexbox, при выборе одного чекбокса все остальные снимаются.

<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>
HTML
10
<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();
   });
});
</script>
HTML
14.12.2016, обновлено 09.12.2021
267067
Предыдущая запись Работа с select с помощью JQuery
Следующая запись Работа с Textarea jQuery

Комментарии 4

Алексей Ванин Алексей Ванин
18 сентября 2020 в 15:04
На Java Script проверить состояние галочки при клике
<P><input type="checkbox" id="checkbox_spage"> Show form Dialog Client on your site.</P>
<SCRIPT>
var el = document.getElementById("checkbox_spage");
el.onclick = function () {
	if (el.checked) {
		alert("checkbox_spage 1");
	} else {
		alert("checkbox_spage 0");
	};
};
</SCRIPT>
DEMO: http://profi.spage.me/jquery/checkbox-set-true-false-checkbox-click-event-on-jquery-and-js/
Александр Максимов Александр Максимов
4 ноября 2021 в 16:19
Как всегда - шикарно изложено, здесь трудно что то Не понять)) Спасибо
Анатолий Замотаев Анатолий Замотаев
24 января 2022 в 22:15
Здравствуйте. А подскажите как сделать по пункту 6 (Показать или скрыть блок контента по клику на checkbox) что бы один блок показывался, а другой наоборот скрывался по клику на checkbox.
Я сделал так
$('#checkbox').click(function(){
if ($(this).is(':checked')){
$('#text').show(100);
$('#text2').hide(100);
} else {
$('#text').hide(100);
$('#text2').show(100);
}
});
Но при первой загрузке страницы скрыто оба блока , и только после первого нажатия на checkbox все начинает работать как надо. Что надо добавить, что бы при первой загрузки блок с ID ="text2" был виден?
Blyamur Blyamur
23 мая 2022 в 16:11
У того блока, что не должен скрываться, убрать
style="display: none;"

, чтобы добавить комментарий.

Другие публикации

Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
55854
+4
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
79707
+3
Отметить или снять все чекбоксы в таблице
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
12080
+1
Селект с чекбоксами
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
39707
+10
Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.
105657
+23
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
261686
+17