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

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

        }

    });

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/MJvt3fmS810/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Неопределённое состояние чекбокса | | 2012-06-19 12:04:13 | | Статьи Web-мастеру | | Чекбокс может иметь только два состояния: отмеченный и неотмеченный. Они могут иметь любое значение, но при отправке формы либо передавать его (отмеченное состояние) либо не передавать (неотмеченное | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: