Question

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

<input id="groups_ids_1" name="group_ids[]" type="checkbox" value="1" />
<label for="groups_ids_1">Display</label>

这很好用，但是如果我然后使用

隐藏复选框

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

或

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

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

Answer 1

隐藏的复选框不会在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标记上设置的类:(参见eg：https://github.com/h5bp/html5-boilerplate/blob/master/index.html）

<!--[if IE 8]>  <html class="no-js lt-ie9" lang="en"> <![endif]-->

但您可以使用首选方法将第二条规则中的属性仅应用于旧IE版本。通过JS应用规则也应该如你所做的那样工作。

Answer 2

您可以尝试在标签上添加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 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中对我有用：

<!--[if IE 8 ]>
<style>
  input[type=checkbox] {
     position: absolute;
     filter: alpha(opacity=0);
  }
</style>
<![endif]-->

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

5 个答案: