CSS IE - 单击相应标签时未选中隐藏的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1252690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE - hidden radio button not checked when the corresponding label is clicked
提问by ScottE
I just noticed a strange behaviour in IE7.
我刚刚注意到 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)
单选按钮通过 css 隐藏，显示：无或可见性：隐藏（不要问）
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.
问题是 - 当我单击 IE7 中的标签时（还没有查看其他 IE 版本），实际上并没有选中关联的单选按钮。我用 jquery 确认了这一点 - 标签点击事件被触发，但单选按钮点击事件没有。表单帖子还确认选中的单选按钮不会更改。
This works correctly in firefox, and also works correctly if I remove the CSS that hides the radio buttons.
这在 Firefox 中正常工作，如果我删除隐藏单选按钮的 CSS，它也可以正常工作。
Is this an IE bug or am I missing something?
这是 IE 错误还是我遗漏了什么？
回答by robertc
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.
这可能与display: none- 您可能还会发现隐藏元素不会与表单的其余部分一起提交它们的值。如果您可以控制它，您可能想尝试将元素定位在屏幕外而不是隐藏它们。
回答by D. Strout
This is a wiki answer to bring together all the different answers and options.
这是一个 wiki 答案，汇集了所有不同的答案和选项。
Option 1:Move the element off-screen as opposed to hiding it completely
选项 1：将元素移出屏幕而不是完全隐藏它
position: absolute;
top: -50px;
left: -50px;
Option 2:Use a bit of JavaScript to set the radio button to checked when the label is clicked
选项 2：使用一些 JavaScript 将单选按钮设置为在单击标签时选中
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
Option 3:Set the element's width and/or opacity to zero
选项 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 */
Option 4:Use another browser :)
选项 4：使用其他浏览器 :)
Basically, the spec for these things doesn't specifically state what behavior to use, but IE generally takes the stance that if it can't be seen, then it doesn't work. "Seen" and "work" can mean different things, but in this case it means that when display:noneis set, the label doesn't activate the radio button, which leads to the usual workarounds necessary for so many things in IE.
基本上，这些东西的规范并没有具体说明要使用什么行为，但 IE 通常采取的立场是，如果它不能被看到，那么它就不起作用。“看到”和“工作”可能意味着不同的东西，但在这种情况下，它意味着当display:none设置时，标签不会激活单选按钮，这导致了 IE 中很多事情所需的常规解决方法。
回答by tinny
This works for me
这对我有用
width: 0px;
Tested in IE7 and IE8. Pure CSS no javascript.
在 IE7 和 IE8 中测试。纯 CSS 没有 javascript。
回答by thismax
This issue exists in IE6, 7, 8, and even the current 9 beta. As a fix, positioning the radio button offscreen is a good idea.
这个问题存在于 IE6、7、8，甚至当前的 9 beta 中。作为修复，将单选按钮定位在屏幕外是一个好主意。
Here's an alternative that doesn't have to involve the designer or the css: Hide the button normally, and make whatever function handles the click event for the button also handle the click event for the label.
这是一个不必涉及设计者或 css 的替代方法：正常隐藏按钮，并使处理按钮的单击事件的任何函数也处理标签的单击事件。
回答by bestattendance
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
Thanks Lane for this. I'm adding it as an answer here so people don't overlook your comment.
感谢莱恩。我在这里添加它作为答案，这样人们就不会忽视您的评论。
回答by scoutm
You can try this for IE7,8:
你可以在 IE7,8 上试试这个：
input{
position: absolute;
z-index: -1;
}
instead of
代替
input{
display: none;
}
回答by Uncle
Replace
代替
style="display:none;"
with
和
style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"
回答by Kasyx
There is some nice compilation of Your propositions:
你的命题有一些很好的汇编：
input {
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
position: absolute;
}
instead of:
代替：
display: none;
回答by Petit_Nuage
I was using jQuery hide()function, so it wasn't easy to change the way an element is hide without writing a more complex code.
I found this idea:
I use class to store the checked attribute and set this attribute back again just before the submit.
我使用的是 jQueryhide()函数，因此在不编写更复杂的代码的情况下更改元素的隐藏方式并不容易。我发现了这个想法：我使用类来存储已检查的属性，并在提交之前再次设置该属性。
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");
});
});
}
It works like a charm in my case.
就我而言，它就像一种魅力。
