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.
  • Tim

    Line 52: if(obj.hasClass(‘active’)) should be if(obj.hasClass(options.activeElementClass)). Can’t uncheck it with a custom active class otherwise. Works a treat otherwise though.

    • Woops, my mistake! Originally it had no options so added them in just before posting it. Thank you, updated the original post.

  • Hi Dave! Nice work on this one! It was exactly what I was looking for.. I extended it a bit by throwing together some real word CSS and publishing it here:

    • Really awesome use of this, good to see others expanding upon it.

  • Also Dave.. I replaced:

    Because that was causing a problem in instances where the input was not wrapped in a label or something. Now it just puts it directly after the original element.

    • Very good point! I originally wrote this for a clients site where I had complete control over the mark up. Should of really thought about the bigger picture.

      I’ll append the code in the post.

  • One more *tiny* thing in the original code it says:
    //Create new span element to be styled

    and you are actually creating an anchor and I’m doing a div so I just removed the word “span”.

    • Originally the system created a span, I then realised that an anchor would make a lot more sense.

      Seems like I didn’t update my comment, thanks for pointing it out.