Сборник приемов JQuery для работы с чекбоксом.
Проверить состояние checkbox
<input type="checkbox" id="checkbox"> checkbox
<script>
if ($('#checkbox').is(':checked')){
alert('Включен');
} else {
alert('Выключен');
}
</script>
Отметить и снять checkbox
// Отметить checkbox
$('#checkbox').prop('checked', true);
// Снять checkbox
$('#checkbox').prop('checked', false);
Отметить/снять все на странице:
// Отметить все
$('body input:checkbox').prop('checked', true);
// Снять все
$('body input:checkbox').prop('checked', false);
Управление группой чекбоксов
<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'ов
Выбор всех отмеченных
Получить из всех отмеченных массив значений атрибута value
Обход неотмеченных чекбоксов
Показать или скрыть блок контента по клику на checkbox
<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
<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>
Сменить цвет текста при выборе чекбокса
<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>
Только один отмеченный чекбокс
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>
DEMO: http://profi.spage.me/jquery/checkbox-set-true-false-checkbox-click-event-on-jquery-and-js/