08-20-10
Einfaches Checkbox Replacement mit JQuery
Auf der Suche nach einer JQuery Alternative zu FancyForm bin ich nicht richtig fündig geworden. Deshalb habe ich selbst eine kleine Alternative geschrieben.
Ist nicht viel, aber ich denke ganz in Ordnung.
Das Plugin soll einfach nur die Checkbox durch Bilder ersetzen.
Wichtig:
Jedes Checkbox Feld braucht ein Label Feld. Die Id der Checkbox muss mit der Id eines Labels übereinstimmen.
HTML-Code
<label for="apple">Apple</label> <input id="apple" checked="checked" name="apple" type="checkbox" /> <label for="strawberry">Strawberry</label> <input id="strawberry" name="strawberry" type="checkbox" /> <label for="pear">Pear</label> <input id="pear" name="pear" type="checkbox" /> <label for="cranberry">Cranberry</label> <input id="cranberry" name="cranberry" type="checkbox" /> <label for="carrot">Carrot</label> <input id="carrot" checked="checked" name="carrot" type="checkbox" /> <label for="peach">Peach</label> <input id="peach" checked="checked" name="peach" type="checkbox" />
CSS-Code
label.checkbox_checked { background: #fff url(chk_on.png) no-repeat; display: block; margin: 10px 0; padding-left: 25px; cursor: pointer; } label.checkbox_unchecked { background: #fff url(chk_off.png) no-repeat; display: block; margin: 10px 0; padding-left: 25px; cursor: pointer; }
JavaScript Code:
$(document).ready(function() { $('input[type=checkbox]').each(function() { $($("label[for="+$(this).attr('id')+"]")).click(function(e) { e.preventDefault(); c = $("#"+$(this).attr('for')); $(c).attr('checked',!$(c).is(':checked')).is(':checked') ? $(this).removeClass('checkbox_unchecked').addClass('checkbox_checked') : $(this).removeClass('checkbox_checked').addClass('checkbox_unchecked'); }).addClass($(this).is(':checked') ? 'checkbox_checked' : 'checkbox_unchecked'); }).hide(); });
