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