点击标签不会检查ie8/9中的单选框

Question

我们遇到的问题是IE 8和IE 9中出现问题.单击标签后,应检查单选框.除了IE 8/9之外,它在所有浏览器中都没有问题,因为它没有检查单选按钮

<label for="so100">
    <img alt="" src="images/type6img.jpg" class="anitem1pic">
    <input type=radio value=1 name="site" id="so100" />
    <span class="anitem1">Stag</span>
</label>

Answer 1

已知的IE"bug"包装图像不会触发收音机

在您的示例中,文本有效,图像不会:

这是一个重复的建议

可点击的标签在IE 8中不起作用

以下是基于在Internet Explorer中使用图像作为标签的测试解决方法 .文章中的解决方案打破了Chrome.我在条件注释中的包装可以防止脚本破坏在点击时触发的浏览器.如果IE9和10的工作方式与Chrome相同if IE,if IE8则可以更改为

现场演示

<!--[if IE]>

<script type="text/javascript">
$(function() {
  $("label img").on("click", function() {
    $("#" + $(this).parents("label").attr("for")).click();
  });
});
</script>

<![endif]-->

我有两个标签的想法也不起作用,因为它是IE抱怨的图像.

<label for="so100">
  <img alt="" src="http://lorempixel.com/output/abstract-q-c-50-50-8.jpg" class="anitem1pic">
</label>        

<input type=radio value=1 name="site" id="so100" />
<label for="so100">    
  <span class="anitem1">Stag</span>
</label>

然而,使用背景图像将起作用