Чекбокс может иметь только два состояния: отмеченный и неотмеченный. Они могут иметь любое значение, но при отправке формы либо передавать его (отмеченное состояние) либо не передавать (неотмеченное состояние). По умолчанию состояние неотмеченное. В HTML можно управлять чекбоксом следующим образом:
<!-- По умолчанию состояние неотмеченное -->
<input type="checkbox">
<!-- По умолчанию состояние отмеченное, XHTML -->
<input type="checkbox" checked="checked" />
<!-- По умолчанию состояние отмеченное, HTML5 -->
<input type="checkbox" checked>
Визуально чекбокс может быть в трех состояниях: отмеченный, неотмеченный и неопределённый. Они могут выглядеть следующим образом:
Состояния чекбокса
Несколько замечаний о чекбоксах:
Вы не можете сделать чекбокс неопределённым в HTML. Нет специального атрибута. Хотя есть свойство чекбокса, которое можно менять в JavaScript:
var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;
или в jQuery:
$("#some-checkbox").prop("indeterminate", true); // prop введен в jQuery 1.6+
Неопределенное состояние является только визуальным эффектом. Чекбокс по-прежнему в отмеченном или неотмеченном состоянии. Значит, что визуальное неопределенное состояние маскирует реальное состояние чекбокса.
Как и сам чекбокс, его неопределенное состояние выглядит по-разному в разных браузерах. Вот пример в Opera 11.50 на Mac:
Вид неотмеченного осстояния
И зачем это нужно?
При разработке проектов часто возникает необходимость в структуре чекбоксов. Каждый чекбокс может иметь наследников чекбоксов. Если все наследники чекбоксы отмечены, то и родительский чекбокс может быть отмеченным. Если ни один наследник не отмечен - то и родитель не отмечен. Но если хотя бы один наследник отмечен, то родительский чекбокс находится в неопределённом состоянии (что может означать - "частично отмечен").
Структура чекбоксов
Пример кода не является идеалом - проверяется только один уровень для введения неопределенного состояния.
Можно также организовать переключение между состояниями при нажатии кнопки мыши на чекбоксе:
var $check = $("input[type=checkbox]"), el;
$check
.data('checked',0)
.click(function(e) {
el = $(this);
switch(el.data('checked')) {
// Неотмеченное состояние, переходим в неопределённое
case 0:
el.data('checked',1);
el.prop('indeterminate',true);
break;
// Неопределённое состояние, переходим в отмеченное
case 1:
el.data('checked',2);
el.prop('indeterminate',false);
el.prop('checked',true);
break;
// Отмеченное состояние, переходим в неопределенное
default:
el.data('checked',0);
el.prop('indeterminate',false);
el.prop('checked',false);
}
});