Créez des checkbox design et originales avec jQuery

Voici un tutorial jQuery permettant de créer des checkboxes HTML design et très originales.

Vous en avez mare des simples cases à cocher dans vos formulaires en guise de checkbox ?

Aaron Weyenberg propose un tutorial pour reproduire des checkbox différentes grâce à du Javascript.

A partir d'un formulaire HTML contenant des checkbox et leurs contrôles dans des listes comme celui-ci:

<form>
	<fieldset>
		<label for="choices">
			<ul class="checklist">
				<li>
					<input name="jqdemo" value="value1" type="checkbox" />
					<p>Here is the first selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value2" type="checkbox" />
					<p>Here is the second selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value3" type="checkbox" />
					<p>Here is the third selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo"value="value4" type="checkbox" />
					<p>Here is the fourth selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
			</ul>
		</label>
		<div style="clear: both;"></div>
		<button class="sendit" type="submit" name="submitbutton" title="Submit the form" />Send it!
	</fieldset>
</form>

Nous allons transformer le rendu à l'aide de CSS:

.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 {
    background-position: -105px 0;
}

.checklist li.selected .checkbox-select {
    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 p {
    text-align: center;
    padding: 8px;
}

.sendit {
    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;
}

Puis animer le tout à l'aide de jQuery:

$(document).ready(function() {
    $(".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");
        }
    );

});

Rien de bien compliqué en effet, le jQuery va uniquement permettre de simuler le cochage des checkbox et changer la classe des checkbox sélectionnées pour que le design change.

Ce tutorial est un bon début pour créer un plugin jQuery de "tuning" de checkbox.

Il ne manquera plus qu'à le rendre dégradable complétement si le visiteur n'a pas Javascript d'activé.

Site Officiel