Jquery on change and click event problem

Jquery on change and click event problem

Hi jQuery Community,

i have a little problem with jQuery.

I have a form . In a select choice many checkboxes are grouped reloaded with ajax. This works great so far. Now i have to count the checkboxes if they are checked. And there is a problem. The counter value is to be output once total for all selected checkboxes and even once within the groups .
Within the checkbox groups there are also a checkAll and uncheckAll button. These should checkboxes completely checked or not within there groups.
As far nearly everything works. But the following problem occurs . If the first checkbox is checked this will not be counted . Only if this checkbox is unchecked again and then is checked again , then start the counter to count. Also the checkAll and uncheckAll buttons work only after this has been pointed out above.

How can I solve the problem ?

Below my used code
  1. <script type="text/javascript">
    $(document).on('change', 'input', function() {
    $(":checkbox").click(function() {
        var $cat  = $(this).closest(".tab-pane");
        var len = $cat.find(":checkbox:checked").length;
        $cat.find(".checkresult").val(len);
    });
    });
    </script>
    <script type="text/javascript">
    $(document).on('change', 'input', function() {
    $(":checkbox").click(function() {
        var $cat2 = $(this).closest(".xxxport");
        var len2 = $cat.find(":checkbox:checked").length;
        $cat2.find(".checkrxsum").val(len2);
    });
    });
    </script>
    <script type="text/javascript">
    $(document).on('change', 'input', function() {
    $(":checkbox").click(function() {
        var $cat  = $(this).closest(".tab-pane");
        var len = $cat.find(":checkbox:checked").length;
        $cat.find(".checkresult").val(len);
        var $cat2 = $(this).closest(".xxxport");
        var len2 = $cat.find(":checkbox:checked").length;
        $cat2.find(".checkrxsum").val(len2);
    });
    });
    </script>
    <script type="text/javascript">
    $(document).on('change', 'input', function() {
    $('.uncheckAll').click(function() {
        var $cat = $(this).closest(".tab-pane");
        var len = $cat.find(":checkbox:checked").length;
        $cat.find(".checkresult").val(len);
        $cat.find("input:checkbox").prop('checked',false);
    });
    $('.checkAll').click(function() {
        var $cat = $(this).closest(".tab-pane");
        var len = $cat.find(":checkbox:checked").length;
        $cat.find(".checkresult").val(len);
        $cat.find("input:checkbox").prop('checked',true);
    });
    });
    </script>