На некоторых сайтах можно увидеть своременные переключатели (радиокнопки) и чекбоксы, которые смотрятся очень хорошо. Сделаем тоже самое – добавим стиль в стандартные элементы формы.
Для этого мы будем использовать небольшой скрипт, примерно в 10 строк кода и label теги.
Как известно, если label-ом обернуть чекбокс, то при нажатии на него будет производится переключение и в самом чекбоксе. Останется только скрыть input тег и назначить событие при клике на label, а именно – добавление/удаление класса selected, который и будет нам говорить о том, что чекбокс нажат.
На сам selected класс мы назначим css стили. Основным отличием в коде для радиокнопок и чекбоксов будет в том, что на радиокнопки мы сначала удаляем selected везде и затем ставим только на кликнутой кнопке. А в чекбоксах мы просто переключаем selected на нажатых элементах.
Также в примере вы найдете приятный бонус-код, который будет писать, какая радиокнопка или чекбокс нажата. Если с первым будет все просто, то для чекбоксов используется цикл, который ищет количество чекбоксов по их одинаковому name, а затем определяет, какой нажат, а какой нет.
При необходимости данный скрипт можно изменить как угодно, для ваших задач.
(Пока оценок нет)
Загрузка...