jQuery ".length" + checkboxes confusing

I have a form with "iCheck" checkboxes and want to check how many checkboxes are checked. iCheck has (amongst others) the callbacks "ifChecked" and "ifUnchecked" that I use for this. The problem is: When I check the first checkbox ("Apple") I get a "0" - when I click "Apple" again I get a "1" - so I am not able to correctly work with the "length" function in that example. Any idea what to do here?

The background is that I want to first hide the "basket" and then show the basket hen there are at least 1 or max. 3 fruits checked. When the user selects 4 or more fruits I want to hide the basket again.

Here is a pen: http://ift.tt/2iFhGkM

$('.my_cool_form input').on('ifChanged', function() {
  if ($('.my_cool_form .checked').length == 0 ) {
$('.info').addClass('active');
  }
  if ($('.my_cool_form .checked').length == 3 ) {
    $('.info').removeClass('active');
  }
});