aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Me encuentro un completo tutorial con el que podremos reemplazar el aspecto de los elementos <input type="checkbox" /> por otro mucho más atractivo.

(Ver Imagen)

Básicamente se trata de un HTML adaptado a la nueva estética, CSS que le dá ese elegante aspecto y unas líneas de jQuery (aunque puede ser cualquier framework, o ninguno de ellos).

HTML

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

Javascript

// 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");
  }
 );
});

// MooTools
// No lo he podido probar
window.addEvent('domready', function() { 

 $$(".checklist .checkbox-select").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().addClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.attr("checked","checked");
   });
  }
 );

 $$(".checklist .checkbox-deselect").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().removeClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.removeAttr("checked");
   });
 });
});

El CSS y los Sprites los teneis en esta página. Si quereis verlo funcionando podeis verlo directamente desde aquí.