Здравствуйте, уважаемые читатели. На сайтах часто требуется производить различные манипуляции с чекбоксами: проверить состояние, разблокировать и заблокировать кнопку при нажатии на чекбокс и др. В этой статье рассмотрим, как выполнять эти и другие действия с помощью jQuery. Сразу перейдем к делу.

Получить значения отмеченных чекбоксов (checkbox value)

$('input:checkbox:checked').each(function(){
    console.log($(this).val());
});

Проверить состояние чекбокса (checkbox is checked)

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

<script>
if ($('#checkbox').is(':checked')){
  console.log('Отмечен');
} else {
  console.log('Не отмечен');
}
</script>

Разблокировать кнопку при клике на checkbox

<input type="checkbox" id="checkbox"> с правилами ознакомлен
<button id="reg" disabled="disabled">Продолжить регистрацию</button>

<script>
$('#checkbox').click(function(){
  if($(this).is(':checked')){
    $('#reg').removeAttr('disabled');
  }else{
    $('#reg').attr('disabled', 'disabled');
  }
})
</script>

Отметить или снять checkbox

<input type="checkbox" id="checkbox"> checkbox
/* Отметить checkbox */
$('#checkbox').prop('checked', true);
/* Снять checkbox */ 
$('#checkbox').prop('checked', false); 

Отметить или снять все чекбоксы на странице

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

Узнать количество отмеченных чекбоксов

var countCheckboxIsCheck = $('input:checkbox:checked').length;

На этом все. Постарался затронуть все наиболее часто встречающиеся случаи работы с checkbox на jquery. Если что-то забыл упомянуть, пишите в комментариях, обязательно дополню. До новых встреч.