Микроблог

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

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

Checkbox состояние и выделение css

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

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

checkbox-css Checkbox состояние и выделение css

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

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

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

<ul class="box-filter" id="filtzone">
            <li><span class="pleft" id="filter-group1">Высота</span>
        <ul>
                              <li class="unchecked">
            <input type="checkbox" value="1" id="filter1">
            высокие          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="2" id="filter2">
            короткие          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="3" id="filter3">
            мини          </li>
                            </ul>
      </li>
            <li><span class="pleft" id="filter-group2">Дополнения</span>
        <ul>
                              <li class="unchecked">
            <input type="checkbox" value="4" id="filter4">
            классические          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="5" id="filter5">
            с пуговицами          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="7" id="filter7">
            с лентами          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="8" id="filter8">
            с ремешками и молнией          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="9" id="filter9">
            с блестками и паетками          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="10" id="filter10">
            с мехом лисы          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="12" id="filter12">
            с бантом          </li>
                                        <li class="unchecked">
            <input type="checkbox" value="13" id="filter13">
            обливные          </li>
                            </ul>
      </li>
          </ul>

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:

<script type="text/javascript">
$(function() {
$('#filtzone .unchecked').live('click',function() {
	$(this).children('input[type="checkbox"]').attr("checked", true);
	$(this).removeClass("unchecked");
	$(this).addClass("checked");
         });
$('#filtzone .checked').live('click',function() {
	$(this).children('input[type="checkbox"]').attr("checked", false);
	$(this).removeClass("checked");
	$(this).addClass("unchecked");
         });
});
</script>

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

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

 

Этот материал опубликован в Микроблог и тегирован , , , . Bookmark the permalink.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>