Стилизация радиокнопок и чекбоксов jQuery

На некоторых сайтах можно увидеть своременные переключатели (радиокнопки) и чекбоксы, которые смотрятся очень хорошо. Сделаем тоже самое - добавим стиль в стандартные элементы формы.

Для этого мы будем использовать небольшой скрипт, примерно в 10 строк кода и label теги.

Как известно, если label-ом обернуть чекбокс, то при нажатии на него будет производится переключение и в самом чекбоксе. Останется только скрыть input тег и назначить событие при клике на label, а именно - добавление/удаление класса selected, который и будет нам говорить о том, что чекбокс нажат.

На сам selected класс мы назначим css стили. Основным отличием в коде для радиокнопок и чекбоксов будет в том, что на радиокнопки мы сначала удаляем selected везде и затем ставим только на кликнутой кнопке. А в чекбоксах мы просто переключаем selected на нажатых элементах.

Также в примере вы найдете приятный бонус-код, который будет писать, какая радиокнопка или чекбокс нажата. Если с первым будет все просто, то для чекбоксов используется цикл, который ищет количество чекбоксов по их одинаковому name, а затем определяет, какой нажат, а какой нет.

При необходимости данный скрипт можно изменить как угодно, для ваших задач.

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

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


Введите капчу: