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

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

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

Если нужно сделать красивый чекбокс - не стандартного вида, то можно воспользоваться технологией  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 файл к сайту и наполнить его следующим содержимым:

$(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 фон немного смещается и мы видим чекбокс в активном состоянии - нажатым. Псевдо-чекбокс и истинный чекбокс между собой связаны, поэтому форма с чекбоксом будет вполне рабочей.

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