jQuery - a checkbox input, styled as a button is no longer triggering the 'change' event

I am trying to implement a checkbox as a button as described here:

http://ift.tt/2j7djwE

I am trying to listen to the the change event of the underlying checkbox so I can do foo(), however the event is not firing, see my jsFiddle here:

http://ift.tt/2hVsuv5

Here's my code:

 <div class=''> 
   <div class="hideComplete btn-group" data-toggle="buttons" >
     <label class="btn btn-primary btn-sm" id="hideCompleteLabel">Hide completed
        <input type="checkbox" id="hidecomplete"/>
         </label>
   </div>
 </div>
<script>
    $('#hidecomplete').on('change', function () {
        if ($(this).is(':checked')) {
            alert("I'm checked")
        } else {
           alert("I'm not checked")
        }

    });
</script>