Internet Explorer（和jquery）中的标签和隐藏字段

我在IE中检查隐藏的复选框时遇到了问题。 这是基础html：

 Display 

这工作正常，但如果我然后使用其中任何一个隐藏复选框

 $('input[type=checkbox]').hide(); 

要么

 $('input[type=checkbox]').css('visibility', 'hidden'); 

单击标签不再检查IE中的复选框。 当然它在Firefox，Chrome和Safari中运行良好。

Answer 1

您可以尝试在标签上添加一个onclick来解决IE问题。

 $('label').click(function() { $('#' + $(this).attr('for')).click(); }); 

如果这不起作用，请尝试手动设置属性。

 $('label').click(function() { var checkbox = $('#' + $(this).attr('for')); if (checkbox.is(':checked')) { checkbox.removeAttr('checked'); } else { checkbox.attr('checked', 'checked'); } }); 

Answer 2

隐藏的复选框不会在IE 9以下的版本中接收事件。我的通用解决方案如下：

 /* hide checkboxes */ input[type=checkbox] { visibility: hidden; position: absolute; /* move out of document flow */ } /* ie8-: hidden inputs don't receive events, move out of viewport */ .lt-ie9 input[type=checkbox] { visibility: visible; top: -50px; } 

当输入获得焦点时，不要将输入移动到左侧或页面将跳入IE！ .lt-ie8是以这种方式在旧IE版本的HTML标记上设置的类:(参见例如： https ： //github.com/h5bp/html5-boilerplate/blob/master/index.html ）

但是，您可以使用首选方法将第二个规则中的属性仅应用于旧IE版本。 通过JS应用规则也应该起作用，就像你似乎正在做的那样。

Answer 3

避免这种情况的最佳方法是将复选框绝对置于顶部：-1000px;

Answer 4

Marc Diethelm ：隐藏的复选框不会在9以下的IE版本中收到事件。

作为变体，而不是visibility: hidden; 或者display: none ，使用clip: rect(0 0 0 0);

所以与其

 $('input[type=checkbox]').hide(); 

要么

 $('input[type=checkbox]').css('visibility', 'hidden'); 

使用类似的东西

 $('input:checkbox').addClass('hidden'); 

和

 input[type=checkbox].hidden { clip: rect(0 0 0 0); position: absolute; /* move out of document flow */ } 

它适用于普通浏览器和IE8

Answer 5

这在IE8中对我有用：