Стилизация checkbox. Введение
Эта статья будет коротенькая, но надеюсь, полезная, в ней я хочу показать, как быстро и просто реализуется стилизация checkbox с помощью jQuery. Все что нам потребуется, это обернуть checkbox span`он и div`ом, после чего скрыть сам чекбокс — этого мы добьемся с помощью css стилей. Остальное реализуем с помощью jQuery. При клики по диву, в котором будет находится наш чекбокс, мы будем проверять его атрибута checked и в зависимости от значения — true или false, будем менять изображение чекбокса, которое зададим span`у с помощью стилей. Для получения значения атрибута стоит использовать метод prop, в отличии от attr, он работает всегда, корректно отдает значение атрибутов для чекбокса.
Стилизация checkbox. Пример
Теперь приведу пример того, что мы получим в итоге:
Стилизация checkbox. Код
И самая главная часть статьи — код, начнем с верстки:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Стилизация checkbox с помощью jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.decor_checkbox span input[type="checkbox"]{
display: none;
}
.decor_checkbox{
clear: both;
height: 42px;
margin-bottom: 5px;
}
.decor_checkbox span {
display: block;
float:left;
cursor: pointer;
width: 42px;
height: 40px;
background: url("http://vk-book.ru/img/checkbox_sprite.png") no-repeat 0 0;
margin-right:10px;
}
.check_active span{
background-position: 0 -40px;
}
</style>
</head>
<body>
<div class="decor_checkbox">
<span>
<input type="checkbox" />
</span>
<label>Вариант 1</label>
</div>
<div class="decor_checkbox">
<span>
<input checked="checked" type="checkbox" />
</span>
<label>Вариант 2</label>
</div>
<div class="decor_checkbox">
<span>
<input type="checkbox" />
</span>
<label>Вариант 3</label>
</div>
</body>
</html>
И подробно прокомментированный javaScript:
// действия после полной загрузки страницы
$(document).ready(function(){
// проверяем, какие чекбоксы активны и меняем сласс для родительского дива
$('.decor_checkbox').each(function(){
var checkbox = $(this).find('input[type=checkbox]');
if(checkbox.prop("checked")) $(this).addClass("check_active");
});
// при клике по диву, делаем проверку
$('.decor_checkbox').click(function(){
var checkbox = $(this).find('input[type=checkbox]');
// если чекбокс был активен
if(checkbox.prop("checked")){
// снимаем класс с родительского дива
$(this).removeClass("check_active");
// и снимаем галочку с чекбокса
checkbox.prop("checked", false);
// если чекбокс не был активен
}else{
// добавляем класс родительскому диву
$(this).addClass("check_active");
// ставим галочку в чекбоксе
checkbox.prop("checked", true);
}
});
});
На этом все, тут можно скачать исходники.
