Вступление #

Кастомизация чекбокса, можно использовать по умолчанию класс .js-custom-checkbox.

Установка #

Пример разметки и инициализации кастомизированного чекбокса.

    <input
        class="js-custom-checkbox"
        type="checkbox"
        data-checkbox-options='{"content": "<p><b>default</b> чекбокс</p>"}'
    >

    <input
        class="js-custom-checkbox"
        type="checkbox"
        data-checkbox-options='{"type": "switch", "content": "<p><b>switch</b> чекбокс</p>"}'
    >

Конфигурация #

Настройки, которые указываются при помощи специальных data-атрибутов.

data-checkbox-options #

В значениях указываются параметры для гибкой настройки элемента.

    <input
        class="js-custom-checkbox"
        type="checkbox"
        data-checkbox-options='{
            "type": "switch",
            "content": "<p>Это кастомизированный чекбокс</p>"
        }'
    >
Название Тип Описание
type string Указывает тип кастомизированного чекбокса: switch или default.
content string Добавляет доп.контент к кастомизированному чекбоксу.

data-checkbox-class #

В значениях можно указать свои классы для кастомизации чекбокса.

    <input
        class="js-custom-checkbox"
        type="checkbox"
        data-checkbox-class='{
            "label":   "my-custom-label",
            "field":   "my-custom-field",
            "replace": "my-custom-replace",
            "content": "my-custom-content"
        }'
    >

где

Название Тип Описание
label string Класс родительской обёртки, по умолчанию checkbox-label.
field string Класс чекбокс-поля, по умолчанию checkbox-field.
replace string Класс замены чекбокс-поля, по умолчанию checkbox-replace.
content string Класс обёртки контента, по умолчанию checkbox-content.