IE - hidden radio button not checked when the corresponding label is clicked

Posted by ScottE on Stack Overflow See other posts from Stack Overflow or by ScottE
Published on 2009-08-10T00:37:24Z Indexed on 2010/06/10 9:23 UTC
Read the original article Hit count: 173

Filed under:
|

I just noticed a strange behaviour in IE7.

I have radio buttons with associated labels as follows:

<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" />
<label for="filter_1">Activities</label>

<input type="radio" name="filter" id="filter_2" value="Services" />
<label for="filter_2">Services</label>

The radio button is hidden via css with display:none or visibility: hidden (don't ask)

The problem is - when I click the label in IE7 (haven't looked at other IE versions yet) the associated radio button is not actually checked. I confirmed this with jquery - the label click event is fired, but the radio button click event is not. A form post also confirms that the checked radio button does not change.

This works correctly in firefox, and also works correctly if I remove the CSS that hides the radio buttons.

Is this an IE bug or am I missing something?

© Stack Overflow or respective owner

Related posts about css

Related posts about internet-explorer