IE浏览器 – 隐藏单选button没有选中相应的标签点击
我只注意到了IE7中的一个奇怪的行为。
我有单选button和相关的标签，如下所示：
<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> 单选button通过css隐藏显示：none或visibility：hidden（不要问）
问题是 – 当我点击IE7中的标签（还没有查看其他IE版本）时，相关的单选button没有被实际检查。 我确认了这个与jquery – 标签点击事件被解雇，但单选button单击事件不是。 表单post也确认选中的单选button不会改变。
这在Firefox中正常工作，如果我删除隐藏单选button的CSS，也可以正常工作。
这是一个IE错误，或者我错过了什么？
这可能与display: none – 您也可能发现隐藏的元素不会将其值与表单的其余部分一起提交。 如果你能控制它，你可能想要试试把屏幕上的元素放在屏幕上而不是隐藏它们 。
这是一个维基答案，汇集了所有不同的答案和选项。
选项1：将元素移出屏幕，而不是将其完全隐藏
position: absolute; top: -50px; left: -50px;
选项2：使用一点JavaScript来设置点击标签时单选button
$("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); });
选项3：将元素的宽度和/或不透明度设置为零
width: 0; /* and/or */ -moz-opacity:0; filter:alpha(opacity:0); opacity:0; outline:none; /* this prevents IE8 from having the line around it even though it's invisible */
选项4：使用另一个浏览器:)
基本上，这些东西的规格并没有具体说明使用什么行为，但是IE通常采取的立场是，如果无法看到，那么这是行不通的。 “看”和“工作”可能意味着不同的事情，但在这种情况下，这意味着当display:none设置，标签不会激活单选button，这导致在IE中的许多事情所需的通常的解决方法。
这个问题存在于IE6,7,8，甚至目前的9个testing版中。 作为一个修复，定位离屏的单选button是个好主意。
这里有一个替代scheme，不需要涉及到devise器或css：正常隐藏button，并使任何函数处理button的点击事件也处理标签的点击事件。
这对我有用
width: 0px;
在IE7和IE8testing。 纯CSS没有JavaScript。
$("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); });
感谢里这个。 我在这里添加它作为答案，所以人们不会忽略你的评论。
更换
style="display:none;"
同
style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"
你可以试试IE7,8：
input{ position: absolute; z-index: -1; }
代替
input{ display: none; }
有一些很好的汇编你的命题：
input { -moz-opacity:0; filter:alpha(opacity:0); opacity:0; position: absolute; }
代替：
display: none;
我使用的是jQuery的hide()函数，因此不用编写更复杂的代码就可以很容易地改变元素的隐藏方式。 我发现这个想法：我使用类来存储checked属性，并在提交之前再次设置此属性。
if ($.browser.msie && $.browser.version == 7.0) { $('input[type=radio]').click(function() { $('input[name="'+$(this).attr("name")+'"]').each(function(){ if ($(this).attr("checked")){ $(this).addClass("checked"); }else{ $(this).removeClass("checked"); } }); }); $('form').submit(function(){ $('input.checked').each(function(){ $(this).attr("checked","true"); }); }); }
它在我的情况下就像一个魅力。
