Стилизация checkbox с помощью jQuery

Стилизация checkbox. Введение

Стилизация checkbox с помощью jQueryЭта статья будет коротенькая, но надеюсь, полезная, в ней я хочу показать, как быстро и просто реализуется стилизация 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);
		}
	});
});

На этом все, тут можно скачать исходники.

Рассказать друзьям:


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

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

*