IE - 单击相应标签时未选中隐藏的单选按钮 [英] IE - hidden radio button not checked when the corresponding label is clicked

问题描述

我刚刚注意到 IE7 中有一个奇怪的行为.

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>

单选按钮通过css隐藏，显示:无或可见性:隐藏(不要问)

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

问题是 - 当我在 IE7 中单击标签时(还没有查看其他 IE 版本)，实际上并没有选中关联的单选按钮.我用 jquery 确认了这一点 - 标签点击事件被触发，但单选按钮点击事件不是.表单帖子还确认选中的单选按钮没有改变.

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.

这在 firefox 中正常工作，如果我删除隐藏单选按钮的 CSS，也可以正常工作.

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

这是 IE 错误还是我遗漏了什么?

Is this an IE bug or am I missing something?

推荐答案

这可能与 display: none 有关 - 你可能还会发现隐藏元素没有得到它们提交的值表格的其余部分.如果您可以控制它，您可能想尝试 将元素移出屏幕而不是隐藏它们.

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.

这篇关于IE - 单击相应标签时未选中隐藏的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！