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

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

Checkbox — пожалуй, один из самых сложных HTML-элементов для стилизации с помощью CSS. Для его оформления часто применяют различные техники и «хаки».

Взглянув на приведенные ниже примеры, вы вряд ли сразу узнаете в них классические чекбоксы — их внешний вид изменен полностью. Тем не менее, в основе лежат стандартные элементы HTML-формы.

Примеры реализаций:

1. Спортивная социальная сеть — sportaker.ru
2. Интернет-магазин по продаже угг — uggmoda.ru

Рассмотрим техническую реализацию на примере фильтров в магазине uggmoda.ru, так как она нагляднее.

1. HTML-код формы

<div>
    Высота
    <ul>
        <li>
            <input type="checkbox" id="height_high">
            <label for="height_high">высокие</label>
        </li>
        <li>
            <input type="checkbox" id="height_short">
            <label for="height_short">короткие</label>
        </li>
        <li>
            <input type="checkbox" id="height_mini">
            <label for="height_mini">мини</label>
        </li>
    </ul>
</div>
<div>
    Дополнения
    <ul>
        <li>
            <input type="checkbox" id="add_classic">
            <label for="add_classic">классические</label>
        </li>
        <li>
            <input type="checkbox" id="add_buttons">
            <label for="add_buttons">с пуговицами</label>
        </li>
        <!-- Остальные элементы списка -->
    </ul>
</div>

2. Стилизация с помощью 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;
}

Как это работает:

1. Исходный элемент input (чекбокс) полностью скрыт правилом display: none; (строка 1 CSS-кода).
2. Вся стилизация применяется к элементам списка <li>, которые имеют два варианта оформления:
   • Базовый стиль (невыбранное состояние): Определяется селектором #filtzone li li (строка 3 CSS-кода).
   • Стиль для выбранного состояния: Определяется селектором #filtzone li li.checked (строка 4 CSS-кода).

3. Логика переключения состояний с помощью jQuery

Изначально страница загружается с элементами в состоянии «unchecked». При клике на элемент необходимо обработать событие: изменить состояние самого чекбокса (input type="checkbox") и переключить класс у соответствующего элемента <li>.

Рабочий скрипт jQuery:

$(document).ready(function() {
    // Обработка клика на li с классом 'unchecked'
    $('#filtzone li li.unchecked').click(function() {
        // Находим связанный чекбокс и отмечаем его
        $(this).find('input[type="checkbox"]').attr('checked', true);
        // Меняем класс для визуального оформления
        $(this).removeClass('unchecked').addClass('checked');
    });

    // Обработка клика на li с классом 'checked'
    $('#filtzone li li.checked').click(function() {
        // Находим связанный чекбокс и снимаем отметку
        $(this).find('input[type="checkbox"]').attr('checked', false);
        // Меняем класс для визуального оформления
        $(this).removeClass('checked').addClass('unchecked');
    });
});

Что происходит в скрипте:

Действие	Цель	Результат
Клик по <li> с классом unchecked	Активировать чекбокс и изменить вид.	1. Чекбоксу добавляется атрибут checked=true. 2. У <li> удаляется класс unchecked и добавляется класс checked.
Клик по <li> с классом checked	Деактивировать чекбокс и изменить вид.	1. У чекбокса удаляется атрибут checked (устанавливается false). 2. У <li> удаляется класс checked и добавляется класс unchecked.

Этот скрипт можно разместить как в разделе <head>, так и в теле документа перед закрывающим тегом </body>.