Javascript ie 7和8中的html文本框未选中图像单击_Javascript_Html_Checkbox

Javascript ie 7和8中的html文本框未选中图像单击

javascript html checkbox

Javascript ie 7和8中的html文本框未选中图像单击,javascript,html,checkbox,Javascript,Html,Checkbox,我似乎无法让这个复选框在ie8中工作，我确实有JS在处理表单，但是我不相信是JS导致了问题。我还没有检查这在ie7中是否有效，但它在所有其他主流浏览器中都有效。有人知道为什么它不起作用吗？我将提供代码和一个实例现场：标记： <script type="text/javascript"> function func() { var img1= document.getElementById("img1"); if(document.getElementById('interes

我似乎无法让这个复选框在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>


函数func（）
{
var img1=document.getElementById（“img1”）；
if（document.getElementById（'interest1'）。选中）
{
img1.src=“images/”+“internetbutton.gif”；
img1.name=“关”；
}
其他的
{
img1.src=“images/”+“internetbuttonched.gif”；
img1.name=“on”；
}
}

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

问题是

标签中的图像捕获了您的单击事件，并且没有传递到标签。标签中的其他元素将转发事件，但图像不会，至少在IE中不会
因此，唯一要做的就是使用指针事件：none防止图像获得点击事件
将表单想象成这样（注意：在表单
标记之外使用输入元素时，不会出现这种行为！）：
可以在此处找到一个实例：

请随意，试着删除说指针事件：无的行用于测试目的
编辑（2014/01/16）：经过一点测试，这似乎只影响IE版本7、8和11。在IE 9/10中，在标签
中嵌套图像就像一个符咒。
我相信这是因为标签中嵌套了img
。IE在这种情况下可能会忽略for属性。@shmiddy你知道我解决这个问题的方法吗？我觉得你把事情复杂化了。你想要完成的是什么？为什么需要使用复选框？@shmiddy该复选框用于向表单发送变量，用户可以选择三项中的一项，或两项，或全部，如果他们愿意的话
<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>

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

    pointer-events: none;
}