IE浏览器 - 隐藏的单选按钮没有被点击时点击相应的标签

我只注意到在IE7中的一个奇怪的行为。IE浏览器 - 隐藏的单选按钮没有被点击时点击相应的标签

我有相关的标签单选按钮，如下所示：

<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显示隐藏：none或visibility：hidden的（不要问）

的问题是 - 当我点击IE7中的标签（尚未查看其他IE版本）时，实际上未检查相关的单选按钮。我用jquery证实了这一点 - 标签点击事件被触发，但单选按钮点击事件不是。表单帖子也确认选中的单选按钮不会改变。

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

这是一个IE错误还是我错过了什么？

来源

2009-08-10 ScottE

它可能与display: none有关 - 您也可能发现隐藏的元素未将其值与表单的其余部分一起提交。如果你有控制权，你可以尝试positioning the elements off screen rather then hiding them。

来源

2009-08-10 01:24:04 robertc

+1是的，这将起作用。如果这是IE中已知的错误，我更好奇。 – ScottE 2009-08-10 11:43:45

我不认为这是一个已知的bug，而是规范中未明确定义的行为。看看我链接到上面的帖子链接到的MSDN文章，似乎这种行为是完全故意的IE部分。如果有东西显示：没有，那么它实际上不是文档的一部分。 MS选择忽略这些因素，Mozilla选择不这样做，这并不是说有一个明确的对或错的方法来做到这一点。 – robertc 2009-08-10 15:23:54

当设计人员的CSS无法传递数据时，可能会破坏数据进入开发人员的表单处理程序，这并不是很酷。这种行为闻起来错了。感谢您的解决方法！ – Koobz 2010-07-05 20:08:57

此问题存在于IE6,7,8甚至目前的9测试版中。作为一个解决方案，将屏幕上的单选按钮定位是一个好主意。

下面是一个替代方案，不需要涉及设计者或css：正常隐藏按钮，并使任何函数处理按钮的click事件也处理标签的click事件。

来源

2010-12-27 19:08:30 thismax

$（“label”）。click（function（e）{e.preventDefault（）; $（“＃”+ $（this）.attr（“for”））。click（）。change（）;} ）; – Lane 2011-05-23 20:42:12

Lane，这是一个非常酷的解决方案。我将它添加为答案，以便让人们不会像我几乎那样忽略它:) – bestattendance 2011-09-26 14:36:59

更换

style="display:none;"

与

style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"

来源

2011-07-11 19:21:35 Uncle

$("label").click(function(e){ 
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});

感谢巷这一点。我在此添加它作为答案，以便人们不会忽略您的评论。

来源

2011-09-26 14:37:50 bestattendance

+1非常感谢@Lane – brenjt 2011-10-18 16:19:39

你可以尝试一下本作IE7,8：中

input{ 
    position: absolute; 
    z-index: -1; 
}

代替

input{ 
    display: none; 
}

来源

2011-12-08 08:32:52 scoutm

这对我的作品

width: 0px;

在IE7和IE8测试。纯CSS没有javascript。

来源

2012-03-30 00:59:32 tinny

还有就是你的主张的一些不错的编译：

input { 
-moz-opacity:0; 
filter:alpha(opacity:0); 
opacity:0; 
position: absolute; 
}

代替：

display: none;

来源

2012-06-01 13:20:07 Kasyx

这是一个维基的答案，把所有不同的答案和选项。

选项1：移动离屏元件相对于完全隐藏它

position: absolute; 
top: -50px; 
left: -50px;

选项2：使用JavaScript代码的单选按钮设置为选中被点击该标签时

$("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被设置时，标签不会激活单选按钮，这导致了IE中许多事情所需的常规解决方法。

来源

2012-06-09 04:15:08

真棒！谢谢！ – 2012-12-03 20:41:03

如果你做的选择1点击标签将导致在FF，IE和Opera不需要的页面滚动，因为浏览器将尝试专注于输入 – Dan 2013-08-10 19:17:16

@丹不知道，但一个'返回false' onclick可能会解决该行为。 – 2014-01-26 19:26:36

我使用的是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"); 
    }); 
}); 
}

它在我的情况下就像一个魅力。

来源

2012-06-22 19:14:40

IE浏览器 - 隐藏的单选按钮没有被点击时点击相应的标签

回答

相关问题