Javascript checkbox only triggering animation when clicked through once?

Regarding this function, it works as it should and delivers an animation when the checkbox is selected,but only the 2nd time. The css3 is specifically geared towards an animation showing through when the opacity is changed, so I tried approaching it with window.onload() to see if it would differ, with no luck. Any ideas on why this might be? Really depends on it working first click.

Edit: I just it makes more sense to specify that after the window is loaded, clicking on the checkbox does nothing at first.

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>