Главная › Новости

Красивый чекбокс с помощью jquery

Опубликовано: 02.09.2018

Как стилизовать чекбокс на чистом css

Если нужно сделать красивый чекбокс - не стандартного вида, то можно воспользоваться технологией  jquery. Для начала нужно создать чекбокс с помощью HTML, и заключить его в теги <span> с нужными классами.

Как стилизовать чекбоксы и радио кнопки

HTML код чекбокса:

<span class="checkbox"> <input type="checkbox" name="volumeAqua100" value="1" id="volumeAqua100" /> <span class="check"></span> <label for="volumeAqua100">100л</label> </span>

Затем, нужно создать файл checkbox.js , подключить JS файл к сайту и наполнить его следующим содержимым:

CSS фичи #9 ➤ Чекбокс-кнопки CSS | CSS custom checkbox input style

$(document).ready( function(){ $.each($(".checkbox"),function(){ if($("input", this).is(':checked')){ $(this).addClass("checked"); } } ); $(".checkbox").click(function(){ $(this).toggleClass("checked"); var path = $("input", this); if(path.is(':checked')){ path.attr("checked", false); }else{ path.attr("checked", true); } } ); } ); function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':''; } }

И в файл стилей style.css добавить следующий код - стили для чекбоксов:

span.checkbox { cursor: pointer; display: inline-block; height: 27px; width: 100%; padding: 0; margin: 0; } span.checkbox:hover { background: #; } span.checkbox:hover .check { border-color: #; } span.checkbox input { display: none; } span.checkbox .check { float: left; width: 27px; height: 27px; background: #fff url(../images/checkbox.png) no-repeat 0 0; padding: 0; } span.checkbox.checked .check { background: url(../images/checkbox.png) no-repeat 0px -27px; } label { float: left; } .hidden { display: none; } .unhidden { visibility: visible; display: block; }

Также необходимо нарисовать фон для красивого чекбокса в двух состояниях: ВКЛ и ВЫКЛ, и положить в папку images.

Принцип работы красивых чекбоксов следующий. Истинный чекбокс скрывается с помощью свойства display: none; , а вместо него отображается псевдо-чекбокс - элемент <span>, имеющий фон в виде изображения checkbox.png. При щелчке на псевдочекбоксе - элементе <span>, ему присваивается класс .checked с помощью скрипта jquery (файл checkbox.js). Для класса .checked фон немного смещается и мы видим чекбокс в активном состоянии - нажатым. Псевдо-чекбокс и истинный чекбокс между собой связаны, поэтому форма с чекбоксом будет вполне рабочей.

Это полезная статья? - Ставь лайк!

Участвуй в развитии блога и сообщества