Оформить checkbox css по значению checked (jquery)

В дизайне сайта нередко требуется оформить чекбоксы (т.н. поля «флажков» в html-формах), исходя из их значения (состояния). Таким образом, нам потребуется считывать состояние checkbox (активное/неактивное: выбран/не-выбран), и прописать изменение внешнего вида checkbox в том и другом случае.

Checkbox — пожалуй, один из самых сложных html-элементов для обработки css стилями. В помощь приходят хаки.

Глядя на нижепредставленные формы, вы вряд ли угадаете классические checkbox — внешний вид полностью изменен. Тем не менее, именно они задаются в html-форме.

#1 — спортивная социальная сеть sportaker.ru

#2 — интернет-магазин по продаже угг uggmoda.ru

Рассмотрим на примере фильтров в угги магазине uggmoda.ru (ибо проще). Html-код формы:

            
Высота
        

                              

            
            высокие          
                                        

            
            короткие          
                                        

            
            мини          
                            
      
            
Дополнения
        

                              

            
            классические          
                                        

            
            с пуговицами          
                                        

            
            с лентами          
                                        

            
            с ремешками и молнией          
                                        

            
            с блестками и паетками          
                                        

            
            с мехом лисы          
                                        

            
            с бантом          
                                        

            
            обливные          
                            
      
          

CSS:

#filtzone li input{display:none}
#filtzone li ul{margin-left:124px;margin:0px;display:block!important}
#filtzone li li{display:inline-block;cursor:pointer;text-transform:uppercase;font-size:11px;border:1px solid #999;color:#636E75;padding:4px 8px;margin-bottom:2px;letter-spacing:2px}
#filtzone li li.checked{color:#fff;background:#111111;border:1px solid #111111;}

Как видно из css-записей, мы полностью скрываем input (в нашем случае, это как раз checkbox) — строка 1:

#filtzone li input{display:none}

Далее все оформление акцентируется на элементе li, растанцовка которого происходит в 2х вариациях.

1. Checkbox — checked (li class=»checked»). Опция выбрана. CSS строка 4: #filtzone li li.checked{color:#fff;background:#111111;border:1px solid #111111;}
2. Checkbox — unchecked (li class=»unchecked»). Опция не выбрана. CSS строка 3 (базовый стиль li): #filtzone li li{display:inline-block;cursor:pointer;text-transform:uppercase;font-size:11px;border:1px solid #999;color:#636E75;padding:4px 8px;margin-bottom:2px;letter-spacing:2px}

Изначально страница загружается с первой вариацией li (class=»unchecked»). При нажатии на элемент, мы должны обработать событие клика, во-первых, изменив состояние checked (имеем в виду input type=»checked»), а во вторых, заменить класс маркера li на class=»checked». Делаем это через рабочий скрипт jquery:

Вставлять jquery-скрипт можно в head или в «тело». Что же именно происходит в скрипте?

1. Нажатие маркера li (дефолтное значение класса «unchecked»), строки 3-7: изменяем состояние checkbox (.attr(«checked», true)) — удаляем класс «unchecked» — добавляем класс «checked».
2. Нажатие маркера li (измененное значение класса «checked»), строки 8-12: изменяем состояние checkbox (.attr(«checked», false)) — удаляем класс «checked» — подставляем класс «unchecked»