Question

I’m trying to customize radio buttons with jquery.
I know there are tons of solutions working out there, but I need to set a different image for each radio button. This is needed because there is no label description, so each radio button must be styled to understand its meaning (example: two radio buttons, one with an image containing “$” and one “€” to check the preferred currency).

I’m creating a simple function called “Stylize” (actually I’ve tried it only on firefox, but I’ll make it work up to IE6/7 and previous versions of major browsers).

By the way the function doesn’t seem to work as expected, because it sets the checked attribute on all radio buttons, giving a weird result.

Here is the fiddle containing a simple example. I’ve analyzed the attributes with firebug. Actually it doesn’t accept a different class name for each radio button, but this is the next step. As you can see the solution I’m working on is to wrap the radio button with an anchor tag and then bind a onclick event handler to select its radio button.

What can I do to make it work properly?
Thank you, Alex.

Answer 1

Here’s a working example: http://jsfiddle.net/bFYW6/2/

Your problem was quite simple: You called var wrapper = $(radio).parent(); before actually wrapping the radio element. Therefore, .parent() referred to the <form> element, not the <a> that you went on to wrap the radio element in.

All I did was switch the order of those two lines and voila!

Another change you could make would be to the final line that actually binds the click event on the wrapper. Rather than:

$(wrapper).click(function() {
    $(radio).attr("checked", true);
});

You could do:

$(wrapper).click(function() {
    $(this).children().attr("checked", true);
});

By using $(this) in the above example, it will always find the radio element that is it’s child. That allows you to then call the Stylize() function just once: Stylize("#radio1, #radio2"); or Stylize("input[type=radio]");.

Example: http://jsfiddle.net/bFYW6/6/

As a final point, you shouldn’t use a capital ‘S’ for your Stylize() function. Beginning a function with a capital letter in JavaScript generally suggests that it is a constructor function for a class, which yours is not.