Неопределённое состояние чекбокса

Чекбокс может иметь только два состояния: отмеченный и неотмеченный. Они могут иметь любое значение, но при отправке формы либо передавать его (отмеченное состояние) либо не передавать (неотмеченное состояние). По умолчанию состояние неотмеченное. В 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:

Вид неотмеченного осстояния

 

И зачем это нужно?

При разработке проектов часто возникает необходимость в структуре чекбоксов. Каждый чекбокс может иметь наследников чекбоксов. Если все наследники чекбоксы отмечены, то и родительский чекбокс может быть отмеченным. Если ни один наследник не отмечен - то и родитель не отмечен. Но если хотя бы один наследник отмечен, то родительский чекбокс находится в неопределённом состоянии (что может означать - "частично отмечен").

Структура чекбоксов

demo

Пример кода не является идеалом - проверяется только один уровень для введения неопределенного состояния.

Можно также организовать переключение между состояниями при нажатии кнопки мыши на чекбоксе:

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);

        }

    });

demosourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/13467-indeterminate-checkboxes/
Перевел: Сергей Фастунов
Урок создан: 15 Августа 2011
Просмотров: 26099
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Августа 2011 16:32
    aldem67
    Win7+FF5 Ужас! тормоза на таком количестве. даже страшно представить что будет при бОльших объемах PS. не дожидаясь выделения/снятия щелкал по галочка, через пару кликов FF завис и выдал что неплохо бы прервать скрипт не дожидаясь его окончания.
    • 15 Августа 2011 17:11
      user46577
      Тот же случай, только в в опере 11.50
    • 16 Августа 2011 10:37
      m_hamlet
      Согласен
  • 15 Августа 2011 18:06
    PROGRAMMATOR
    Много ресурсов жрет в первом демо. Мой i7-950 при выполнении грузит до 10%. Да и призадумывается при выполнении на 1 сек.
    • 15 Августа 2011 19:26
      Serpanok
      Поддерживаю, тормозит(
  • 15 Августа 2011 22:16
    Ygreec
    Ну если жрет такие ресурсы, то при сомнительной важности этого механизма - лучше его ф топку...
  • 16 Августа 2011 01:49
    AndreyT
    можно и получше сделать
  • 27 Августа 2011 10:02
    notbot
    Идея хорошая, только реально тормозит...
  • 8 Ноября 2011 17:08
    Hamey
    Тооормозит...
  • 25 Декабря 2011 01:02
    alekseymedvedev
    А что вы хотели, это ведь html5....
^ Наверх ^