checkbox has to be clicked twice to execute the animation

I created a custom animated checkbox that looks like a switch. I used class names for modifying the animations of my checkbox. Here is my code:

HTML

<label>
    <input class="cb" type="checkbox">
    <div class="ball"></div> <!-- don't mind this -->
</label>

Javascript

var $ = document.querySelector.bind(document);

$('label').onclick = function() {
    if(!$('.cb').checked) {
        this.classList.add('clicked');
    } else {
        this.classList.remove('clicked');
    }
}

It worked successfully, but not perfectly, because at INITIAL click of the checkbox (which means after the page load), you have to click it twice in order for the first animation to be executed. I tried event.stopPropagation() but it's still the same. I also tried event.preventDefault() but it only worked on first animation.