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!




11 Responses to Radio Buttons not Showing Checked in FireFox

  1. A fellow web developer February 17, 2009 at 5:39 pm #

    Looks like there’s a bug in Firefox regarding the autocomplete feature and radio buttons. Here’s a fix I found. It’s not ideal, but it works.

  2. Byron Bennett February 17, 2009 at 6:16 pm #

    Thanks for the tip! I’ll check it out.

  3. Andy Pallett March 8, 2009 at 3:55 am #

    Thanks to the fellow web developer, that works perfectly.

  4. J Stafford March 29, 2009 at 1:54 pm #

    You just saved me a ton of time. Thanks!

  5. Ashley September 11, 2009 at 12:55 pm #

    Hallelujah thank you! This saved some major hair pulling.

  6. Paul September 28, 2009 at 8:17 am #

    brilliant! solved a big wtf for me. many thanks!

  7. Liz December 7, 2009 at 10:51 am #

    Thank you! Another developer’s time that you have rescued! Thanks for posting this!

  8. Chris S. February 6, 2010 at 4:06 am #

    Thanks HEEEAPS from me, too Fellow Web Developer.

    I’ve started working in VB.NET and I thought it was my code that was causing the issues!
    That has definitely worked and I think is the fix for now for FF developers. 🙂

    Thanks a LOT to Byron for this original post, too. It’s VERY detailed and has explained my frustration to a tea…. 🙂

    Nice one. 🙂

  9. Byron Bennett February 6, 2010 at 10:13 am #

    Welcome, everyone…this was a major pain for me for several hours!


  10. john August 31, 2010 at 2:08 pm #

    thank you for this – odd but fixed


  1. Problem mit checked="checked" - HTML @ Forum, Tutorial, Anleitung, Schulung & Hilfe - July 29, 2009

    […] […]

Powered by WordPress. Designed by Woo Themes