Checkbox с 3 состояниями

После небольшого перерыва возобновляю добрую традицию =).
Сегодня я расскажу о checkbox_ах. Да, что-то новое будет поведать сложно, так как статей о них написано немало.
Начну я, пожалуй, с чего-нибудь простого, но не сильно заезженного - чекбоксы с тремя состояниями.

Часто при создании пользовательских фильтров требуется не только отмечать "что нужно", но также поменять "что не нужно" и оставлять "что не важно". Яркий пример checkbox с тремя состояниями реализован на nigma.ru.

У данной формы может быть всего 2 состояния (checked или не checked). Поэтому для определения состояния предлагаю использовать параметр value.
соответственно:

• 0 - третье состояние
• 1 - unchecked
• 2 - checked

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

<div class="checkbox"><input type="checkbox" id="checkbox1" value="1" name="moscow" /></div><label for="checkbox1">Москва и область</label>

.checkbox{
     float:left;
     clear:left;
     margin-top:5px;
     width:14px;
     height:14px;
     background: url(../img/checkboxs.png) no-repeat 0px 0px;
}
.checkbox input{
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
     -moz-opacity: 0;
     -khtml-opacity: 0;
     opacity: 0;
     cursor: pointer;
}

Далее необходимо прикрутить анализ состояния чекбокса и обработчик его изменения:

$(document).ready(function(){
     // Просчет состояния
     $('.checkbox-area .checkbox input').each(function(){
          $(this).attr('checked','checked');
          if ($(this).val() != '1'){
               if ($(this).val() == 0){
                    $(this).parents('li').addClass('checked3');
               }else{
                    $(this).parents('li').addClass('checked');
               }
          }
     })
     //Изменение состояния
     $('.checkbox-area .checkbox input').live('change', function(){
          var cur_obj = $(this);
          $(this).attr('checked','checked');
          if (cur_obj.val() =='0'){
               cur_obj.val('1');
               cur_obj.parents('li').removeClass('checked3');
          }else{
               if (cur_obj.val() =='1'){
                    cur_obj.val('2');
                    cur_obj.parents('li').addClass('checked');
               }else{
                    cur_obj.val('0');
                    cur_obj.parents('li').removeClass('checked').addClass('checked3');
               }
          }
          
     })
})

Демо Cкачать