Javascript 复选框仅在单击一次时触发动画？

Question

关于此功能，它按预期工作，并在选中复选框时提供动画，但仅限第二次。 css3 专门针对改变不透明度时显示的动画，因此我尝试使用 window.onload() 来接近它，看看它是否会有所不同，但没有成功。关于为什么会这样的任何想法吗？确实取决于它的第一次点击是否有效。

编辑:我只是指定在加载窗口后，单击复选框首先不执行任何操作更有意义。

function myFunction() {

    document.getElementById("check").onclick = function() {
    if (this.checked) {
        document.getElementById("win").style.opacity = "1";
    }
    else {
        document.getElementById("win").style.opacity = "0";
    }
};
}

.win {
  opacity:0;
  background-color: blue;
  width:200px;
  height:20px;
  }

<input type="checkbox" class="checkbox" id="check">
<div class="win">X</div>

Answer 1

这里的问题是您的函数第一次运行，它创建事件处理程序。首先分配事件，然后单击时运行。

您的订单是:

第一次点击:onclick 已注册，未被调用。

第二次点击:onclick 被调用，因为第一次点击创建了它。

document.getElementById("check").onclick = function() {
    if (this.checked) {
        document.getElementById("win").style.opacity = "1";
    }
    else {
        document.getElementById("win").style.opacity = "0";
    }
};

删除myFunction，除非您立即调用它并分配事件处理程序。