Check length if at least one checkbox is checked

I want to check the length if at least one checkbox is selected from multiple check boxes. However, for the below, it returns nothing. The function is not firing. I've added the required jQuery, css, JS scripts etc for better example. My intention is that through length method, I want to check if at least one checkbox is checked, otherwise, return 0.

function checkcond1checkbox() {
  var checked = $("#productModal input:checkbox:checked").length;
  alert(checked);
}


$(function () {
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
    checkboxClass: 'icheckbox_flat-green',
    radioClass: 'iradio_flat-green'
})
});

/* iCheck plugin Flat skin, green
----------------------------------- */
.icheckbox_flat-green,
.iradio_flat-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(green.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat-green {
    background-position: 0 0;
}
    .icheckbox_flat-green.checked {
        background-position: -22px 0;
    }
    .icheckbox_flat-green.disabled {
        background-position: -44px 0;
        cursor: default;
    }
    .icheckbox_flat-green.checked.disabled {
        background-position: -66px 0;
    }

.iradio_flat-green {
    background-position: -88px 0;
}
    .iradio_flat-green.checked {
        background-position: -110px 0;
    }
    .iradio_flat-green.disabled {
        background-position: -132px 0;
        cursor: default;
    }
    .iradio_flat-green.checked.disabled {
        background-position: -154px 0;
    }

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox_flat-green,
    .iradio_flat-green {
        background-image: url([email protected]);
        -webkit-background-size: 176px 22px;
        background-size: 176px 22px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>

<div class="box-body row" id="productModal">
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" onclick="return checkcond1checkbox();" name='Selectedproducts1[]' value="1">1
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" onclick="return checkcond1checkbox();" name='Selectedproducts1[]' value="2">2
</div>

Solution

You have to use the iCheck specific events:

ifClicked: user clicked on a customized input or an assigned label
ifChanged: input's "checked", "disabled" or "indeterminate" state is changed
ifChecked: input's state is changed to "checked"
ifUnchecked: "checked" state is removed
ifToggled: input's "checked" state is changed
ifDisabled: input's state is changed to "disabled"
ifEnabled: "disabled" state is removed
ifIndeterminate: input's state is changed to "indeterminate"
ifDeterminate: "indeterminate" state is removed
ifCreated: input is just customized
ifDestroyed: customization is just removed

$(function() {
  var checkboxes = $('input[type="checkbox"].flat-red, input[type="radio"].flat-red');
  
  checkboxes.iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    })
    .on('ifChanged', function(event){
      var l1 = checkboxes.filter(":checked").length,
          l2 = $('input[type="checkbox"]').filter(":checked").length,
          l3 = $("input:checked").length;
          
      console.log(l1, l2, l3);
    });
});

/* iCheck plugin Flat skin, green
----------------------------------- */
.icheckbox_flat-green,
.iradio_flat-green {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<div class="box-body row" id="productModal">
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" name='Selectedproducts1[]' value="1">1
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" name='Selectedproducts1[]' value="2">2
</div>