1

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

直播：http: //jsbin.com/ubran/3/edit

标记：

<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>
4

1 回答 1

0

我知道这个线程已经有一年了，但我找到了解决方案。

问题是内部的图像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 中，将图像嵌套在 a 中label就像一种魅力。

于 2014-01-15T15:41:21.867 回答