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，除非您立即调用它，指定事件处理程序。