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

這裏的問題是你的函數第一次運行時，這創建事件處理程序。首先分配事件，然後點擊運行。

你的順序是：

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