Question

我有这个代码应该通过使用控件onChange事件检查和取消选中一个表单复选框来隐藏和显示DIV。它适用于Chrome，Firefox，Safari和Opera，但IE 8和9拒绝合作......控制台中没有错误消息。我缺少什么？

感谢您的帮助！

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Demo</title>
<script type="text/javascript">
var divVisible = true;
function Passport() {
   if (divVisible) {
      document.getElementById('mydiv').style.visibility="hidden";
      divVisible = false;
   }
   else {
      document.getElementById('mydiv').style.visibility="visible";
      divVisible = true;
   }
}
</script>
</head>
<body>
   <form>
      <input type="checkbox" onchange="Passport();" value="Passport">Passport
   </form>
   <div style="height: 100px; width: 100px; background-color: #ff0;" id="mydiv"></div>
</body>
</html>

Answer 1

根据此answer

IE中的

onchange仅在复选框失去焦点时触发。因此，如果您向其添加标签，请多次点击空格，标签，您只会获得一个onchange个事件，但会有多个onclick个事件。

您应该更改代码以改为使用onclick事件：

<input type="checkbox" onclick="Passport();" value="Passport">Passport</input>

Answer 2

在焦点丢失之前，复选框输入不会触发任何更改事件。每次点击时输入值都会改变。

更改onchange="Passport();"

的onclick="Passport();"

Answer 3

将onchange更改为onclick，因为IE8会在焦点丢失时触发更改

根据复选框的状态进行调整

<input type="checkbox" onchange="Passport(this.checked);" id="passportCB" value="Passport"><label for="passportCB">Passport</label>

和功能

function Passport(state) {
      document.getElementById('mydiv').style.visibility= state ? "hidden" : "visible";
}

我还添加了一个标签，因此用户可以点击文本并切换复选框状态。

Internet Explorer不执行onChange函数

3 个答案: