Question

我似乎无法在ie8中使用此复选框，我确实有JS使用表单，但我不相信它是导致问题的JS。我没有检查过这是否适用于ie7，但它确实适用于所有其他主流浏览器。任何人都知道为什么它不起作用？我提供代码以及实例。

标记：

<script type="text/javascript">
function func()
{
var img1= document.getElementById("img1");

if(document.getElementById('interest1').checked)
{
    img1.src = "images/" + "internetbutton.gif";
    img1.name = "off";
}
else
{
    img1.src = "images/" + "internetbuttonchecked.gif";
    img1.name = "on";
}
}
</script>



</head>

<body>
<form>
<p align="center">
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center">
<label for="interest1" id="label-interest1"><img src="images/img1.jpg" width="781" height="800" onclick="func()" id="img1" /></label>
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label>
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image-->
</form>

Answer 1

我知道这个帖子已经有一年了，但我找到了解决方法。

问题是label内的图片会捕获您的点击事件，而不是传递给标签。 label中的每个其他元素都会转发事件，但图像不会，至少不会在IE中。

因此，唯一要做的就是使用pointer-events: none;阻止图像获取点击事件。

想象一下这样的表单（注意：当在form标签之外使用输入元素时，不会发生这种行为！）：

<form>
    <input type="checkbox" name="interest1" id="interest1" value="1">
    <input type="checkbox" name="interest2" id="interest2" value="2">

    <label for="interest1" id="label-interest1"><img src="some/image1.jpg"/></label>
    <label for="interest2" id="label-interest2"><img src="some/image2.jpg"/></label>
</form>

你的CSS将是：

label {
    border:1px solid red;
    display:inline-block;
}
label > img {
    width: 100px;
    height: 100px;

    pointer-events: none;
}

可以在这里找到一个实例： http://jsbin.com/OxOlETU/2/edit

请随意删除pointer-events: none;行以进行测试。

编辑（2014/01/16）：经过一些测试后，这似乎只会影响IE版本7,8和 11 。在IE 9/10中，将图像嵌套在label内就像魅力一样。

ie 7和8中的html文本框未检查图像点击

1 个答案: