Recently wrote an easy to use jQuery plugin to replace checkboxes with anchor tags so they could be styled. Currently it’s very simple and doesn’t contain many extensive features but is a good base to be built on top of.

This simply will hide any checkbox that you attach it to, then create a new anchor tag directly next to the checkbox with the newElementClass as it’s class. Then when the anchor is clicked it will check the hidden checkbox and add the activeElementClass to itself.

This will also add the activeElementClass to any check boxes that are checked on load along with support for labels.

To call the plugin you simply do:

Options are as follow:

newElementClass – is the class given to the newly created anchor tag (Default: simple-checkbox-replace)
activeElementClass – the class that is added when the checkbox has been checked (Default: active)

Then you can simply target these new classes in your CSS, easy as that!

I plan to make this support Radio buttons and other input elements if needed in the future. This plugin should be supported in IE6+ and every modern browser. Your styling may not be supported by the browser you choose.

Dave Macaulay
Dave Macaulay
I'm an enthusiastic, slightly eccentric Magento developer who bores with the idea of another basic brief.