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

Question

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?

Answer 1

It probably is to do with the display: none - you may also find that hidden elements don't get their values submitted with the rest of the form. If you have control over it, you may want to try positioning the elements off screen rather then hiding them.