Верх страницы
Обложка к записи Неопределённое состояние флажка
Время для прочтения: 0 мин. 4 сек.

Неопределённое состояние флажка

Чекбокс (флажок) может находиться только в двух состояниях: отмеченный и неотмеченный. Он может иметь абсолютно любое значение, которое будет передано серверу при отправке формы, при условии, что чекбокс отмечен, в противном случае — значение не передается. По умолчанию флажок не отмечен.

В HTML это выглядит так:


<!-- Не отмеченный флажок по умолчанию -->
<input type="checkbox">

<!-- Отмеченный флажок по умолчанию в XHTML -->
<input type="checkbox" checked="checked" />

<!-- Отмеченный флажок по умолчанию в HTML5 -->
<input type="checkbox" checked>

Визуально же чекбоксы имеют три состояния: отмеченный, неотмеченный и неопределённый. Например:

Что нужно знать?

Невозможно сделать флажок неопределенным в HTML, так как просто не существует атрибута indeterminate. Это свойство чекбокса, которое можно установить только через JavaScript:


var checkbox = document.getElementById("ИД_флажка");
checkbox.indeterminate = true;

Или в стиле jQuery:


$("#ИД_флажка").prop("indeterminate", true); // jQuery 1.6+

Неопределённое состояние чекбокса существует лишь визуально, фактически он так и имеет два состояния: неотмеченный и отмеченный.

Третье состояние флажка выглядит по-разному в различных браузерах:

Opera (Mac) Chrome (Windows)

Где применить?

Единственное применение данного третьего состояния — вложенные чекбоксы (дерево чекбоксов). Каждый флажок может иметь дочерние флажки. Если все дочерние флажки отмечены, родительский тоже отмечается. Если ни один из них не отмечен, родительский тоже не отмечается. Если дочерние чекбоксы отмечены не все, родительский флажок переходит в третье состояние неопределенного.

Посмотреть пример.

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы