Radio Buttons not Showing Checked in FireFox

In the process of building a WordPress plugin that I’m sure will sweep the nation 😉 , I came across a really annoying FireFox bug with Radio Buttons.  The problem is that if you two groups of Radio Buttons (say 3 buttons in each group) and you set one button as Checked in each group, sometimes, the button in the first group won’t show up as Checked.  Arrrgghhhh!

Radio Buttons not Showing Checked – a FireFox Bug

So, why????  And why does it do it sometimes and not other times.  Well, I thought I knew the answer.  I thought that if the names of your radio button groups are similar up to a point, FireFox doesn’t differentiate between them in it’s initial rendering.  So I changed the names a little bit (see below) and that appeared to fix it.  Then I refreshed the screen…and WHAM!!!! broke again.

Here’s the HTML I had:

<!--Group 1 -->
<input style="width: auto;" checked="checked" name="sppl_tr_country" type="radio" value="US" tabindex="55" />US<br />
<input style="width: auto;" name="sppl_tr_country" type="radio" value="UK" tabindex="55" />UK<br />
<input style="width: auto;" name="sppl_tr_country" type="radio" value="CA" tabindex="55" />CA
<!--Group 2 -->
<input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$" tabindex="56" />$$<br />
<input style="width: auto;" checked="checked" name="sppl_tr_cost" type="radio" value="$$$" tabindex="56" />$$$<br />
<input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$$$" tabindex="56" />$$$$<br />
<input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$$$$" tabindex="56" />$$$$$

In IE 6 and Chrome, it was rendering:

In FireFox, it rendered:

The exact same HTML across 3 browsers, and weirdly enough, IE6 got it right.  There were occassions when FF got it right too, but sometimes if you refreshed the screen, it would be wrong again.

For the love of Pete!  What’s going on?

I thought the trouble was how close my Radio Button names were to each other:

• Group 1:   sppl_tr_country
• Group 2:   sppl_tr_cost

The first 10 characters were the same.  Change the first character (or presumably something near the front) so that the names are different early on seemed to work, until I refreshed the screen.  Here’s how I changed the screen:

• Group 1:   1_sppl_tr_country
• Group 2:  2_sppl_tr_country

Ah well, if anyone knows what’s up, pleeeeeeeeease let us know!

Cheers!

Byron