Firefox Radio Button Weirdness
-
06-07-2019 - |
Question
I have a form with a lot of groups of radios. Each radio has a unique id and has the same name as the others in its group. The page validates as XHTML transitional.
Tested in IE6 & 7, Opera, Safari, and Chrome it works exactly as you would think it would from either mouse or keyboard input.
In FireFox it goes crazy. A single click on any radio in a group sets the first radio in the group checked. A double click on a radio usually selects it. Anyone seen this before?
Sample group looks like this:
<input type="radio" name="upAndDown_1" id="upAndDown_11" value="Y" /> Y <br />
<input type="radio" name="upAndDown_1" id="upAndDown_12" value="N" checked="checked" /> N<br />
<input type="radio" name="upAndDown_1" id="upAndDown_13" value="NA" /> NA
The phonmomenon can be tested here: http://www.nolaflash.com/stackoverflow/firefox_and_radios.html
Any advice appreciated.
Solution
Doh! My designer had a single tag wrapping each group of radios. Eliminating the label tag fixes FireFox's weirdness.
OTHER TIPS
It's indeed the surrounding <label>
tag that causes the Firefox issue (although it is valid html).
This should do the trick:
<input type="radio" name="upAndDown_2" id="upAndDown_21" value="Y"/><label for="upAndDown_21">Y</label><br/>
<input type="radio" name="upAndDown_2" id="upAndDown_22" value="N"/><label for="upAndDown_22">N</label><br/>
<input type="radio" name="upAndDown_2" id="upAndDown_23" value="NA" checked="checked"/><label for="upAndDown_22">NA</label>