Украшаем checkbox’ы с помощью jQuery и Css

Все наверное знают как выглядят стандартные checkbox’ы и многим они не нравятся так как они часто не вписываются в дизайн сайта или еще че нибудь, но чаще всего это. Сейчас попробуем сделать нестандартные checkbox’ы такие как на картинке:

Для этого нам понадобится некоторе знание css html ну и jquery. Ну и начнем, а начнем мы с html кода список checkbox’ов у нас будет чуточку необычный, будет форма внутри которой располагается неупорядоченный список то есть ul и каждый li имеет внутри себя 3 элемента это label и две ссылки разных классов один для выбора чекбокса другой для снятия выбора, ну и в окнце buttun типо submit’а . Вот собственно код:

<form>
	<fieldset>
		<legend>Choose some stuff...</legend>
		<ul class="checklist">
			<li>
				<input id="choice_a" name="jqdemo" value="value1" type="checkbox" />
				<label for="choice_a">Here's the 1st selection</label>
				<a class="checkbox-select" href="#">Select</a>
				<a class="checkbox-deselect" href="#">Cancel</a>
			</li>
			<li>
				<input id="choice_b" name="jqdemo" value="value2" type="checkbox" />
				<label for="choice_b">Here's the 2nd selection</label>
				<a class="checkbox-select" href="#">Select</a>
				<a class="checkbox-deselect" href="#">Cancel</a>
			</li>
			<li>
				<input id="choice_c" checked="checked" name="jqdemo" value="value3" type="checkbox" />
				<label for="choice_c">Here's the 3rd selection</label>
				<a class="checkbox-select" href="#">Select</a>
				<a class="checkbox-deselect" href="#">Cancel</a>
			</li>
			<li>
				<input id="choice_d" name="jqdemo" value="value4" type="checkbox" />
				<label for="choice_d">Here's the 4th selection</label>
				<a class="checkbox-select" href="#">Select</a>
				<a class="checkbox-deselect" href="#">Cancel</a>
			</li>
		</ul>
		<button class="sendit" title="Submit the form">Send it!</button>
	</fieldset>
</form>

Как вы уже наверное заметили для третьего checkbox’a мы установили свойство checked то есть оно у нас по умолчанию будет выбрано, ну а остальные соответственно нет. Ну что здесь еще можно пояснить … ссылка для выбора имеет класс checkbox-select, а для удаления выбора checkbox-deselect, дальше мы учтем в css коде то чтобы они не были одновременно видны то есть одна из ссылок будет скрыта тогда когда другая будет показана, то есть при нажатии на кнопку выбора чекбокса кнопка выбора будет скрываться с помощью dispaly:none, после чего ссылка для удаления выбора будет отображена. Давайте рассмотрим css код, но ля начала нам нужно создать следующие три картинки:

>
chckbox.gif должен быть размером 210 на 150 пикселей, такой широкий потому что мы будем менять расположение фона от изменения состояния чекбокса если выбран смещаем влево на 105 пикселей и получаем зеленый фон, иначе наоборот серый.
Sendit.gif и select.gif мы будем использовать для фонов наших кнопок. Ну а теперь уже рассмотрим css:

legend {/* устанавливаем для заголовка размер шрифта*/
	font-size: 17px;
}

fieldset {/* убираем границы */
	border: 0;
}

.checklist {/* своего рода reset списка с классом checklist */
	list-style: none;
	margin: 0;
	padding: 0;
}

.checklist li {/* устанавливаем для элементов списка фон(по умолчанию) то есть серый так как нет сдвига, размеры, шрифт */
	float: left;
	margin-right: 10px;
	background: url(i/checkboxbg.gif) no-repeat 0 0;
	width: 105px;
	height: 150px;
	position: relative;
	font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}

.checklist li.selected {/* ну а если чекбокс расположенный в li выбран li меняет класс на selected и соответсвенно этому классу меняет фон на зеленный с помощью смещения */
	background-position: -105px 0;
}

.checklist li.selected .checkbox-select {/* здесь если чекбокс выбранн то есть li имеет класс selected нам не нужно отоброжать кнопку выбора так как он уже выбранн и мы его скрываем  */
	display: none;
}

.checkbox-select {/* здесь устанавливаем атрибуты для кнопки выбора */
	display: block;
	float: left;
	position: absolute;
	top: 118px;
	left: 10px;
	width: 85px;
	height: 23px;
	background: url(i/select.gif) no-repeat 0 0;
	text-indent: -9999px;
}

.checklist li input {/* скрываем сами кнопки чекбокс (они есть но их не видно) */
	display: none;
}

a.checkbox-deselect {/* атрибуты для кнопки удаления выделения по умолчанию скрыт*/
	display: none;
	color: white;
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	top: 120px;
	right: 10px;
}

.checklist li.selected a.checkbox-deselect {/* если чекбокс выбран отображаем кнопку для удаления выбора */
	display: block;
}

.checklist li label {/* атрибуты для названия чекбокса */
	display: block;
	text-align: center;
	padding: 8px;
}

.sendit {/* ну и конечно атрибуты для submitt (кнопки, кто не в теме) */
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: url(i/sendit.gif) no-repeat 0 0;
	text-indent: -9999px;
	margin: 20px 0;
}

В комментраиях к коду я вроде все пояснил, так что перейдем к jQuery:

$(document).ready(function() {

	/* здесь всем выбранным чекбоксам находим робительский тег в нашем случае li и ставим ему класс selected*/
	$(".checklist input:checked").parent().addClass("selected");

	/* при клике на кнопку выбора li добавляем класс selected чекбоксу атрибут checked */
	$(".checklist .checkbox-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");

		}
	);
    /* ну а здесь убираем их соответственно по нажатию по кнопке удаления выбора  */
	$(".checklist .checkbox-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");

		}
	);

});
});

Ну вроде все смотрим