PROBLEMATIC CHECKBOX

I have got an array of checkboxes on one of my pages like so:

<form name='form1' id='form1'> 
<table class='table table-striped table-bordered table-condensed table-responsive
 <tbody>
  <tr><th><input type='checkbox' name='year' value='2001' class='form-control' />2001</th></tr>
  <tr><th><input type='checkbox' name='year' value='2002' class='form-control' />2002</th></tr>
  <tr><th><input type='checkbox' name='year' value='2003' class='form-control' />2003</th></tr>
  <tr><th><input type='checkbox' name='year' value='2004' class='form-control' />2004</th></tr>
 </tbody>
</table>
</form>

I want to use the number of checked boxes to update a div or similar element which displays the number of checked boxes.

My JS looks like :

$('#form1 :checkbox').on('change', function(){

    var checked = $('#form1 :checkbox:checked').length;
    console.log( checked );
});

The problem is: when any of the boxes is checked, the UI shows it so, but the click/change event is not fired. However, when I click the surrounding, the event is fired but the UI does not show it. I have spent hours looking at similar questions and applied almost all the suggestions but no headway. Could it be Any help form house?