Uncheck "Check All" checkbox when one of the checkbox is uncheck

I have this mini project which is almost done. My problem is the checkall checkbox. It worked well checking all the checkboxes, but if I uncheck 1 checkbox from my tbody checkall checkbox still on a state of being checked.

below is my code.

to be pointed out well this is my checkall and uncheckall checkbox. which can also be found on snippet.

$('#checkAll').click(function(){
    $(':checkbox').prop('checked', this.checked);
});

$('.cb').each(function(index){
    $('this').on("change", function(index) {
        if (!this.checked) {
            $("#checkAll").prop('checked', false);
            return;
        }
    });
})

var tasks = [];
var count = 1000;

$('document').ready(function(){
        
        toggleRemoveAndMarkButtons();

        $('#add').click(function() {
                var desc        = $.trim($('#list-input').val());

                if (!desc) {
                        item.id = "";
                        alert("Input a description");
                        return;
                }

                var status  = $('#task-status').val();
                item            = {};

                item.description = desc;
                item.status      = status;
                for(i = 0 ; i < tasks.length; i++)  {
                        if(tasks[i].description.toUpperCase() == desc.toUpperCase()) {
                                alert('Task description is already on the list. Please input new task description!')
                                return;
                        }
                }
                var id  = count++;
                item.id = id;
                tasks.push(item);

                var row  = "'<tr id="+ item.id +" class='row'>'";
                        row += "<td><input type='checkbox' class='cb' /></td>";
                        row += "<td> #" + item.id + "</td>";
                        row += "<td>" + item.description.toUpperCase() + "</td>";
                        row += "'<td class="+ item.id +">" + item.status + "</td>";
                        
                $("#mylist tbody").append(row);


                //clear input field
                $('#list-input').val('');
                $('#list-input').focus();
        });

        //remove list function
        $('#delete').on('click', function() {
        if (confirm("Are you sure to delete selected task(s)?")){
                $(':checkbox:checked').each(function(){
                        var rowId = $(':checkbox:checked').parents('tr').attr('id');
                        var row   = $('tr#' + rowId);
                        for(i=0; i < tasks.length; i++){
                                if(tasks[i].id == rowId){
                                        tasks.splice(i, 1);
                                        break;
                                }
                        }
                        row.remove();
                })
        }
        uncheckAfterActionClick();
        toggleRemoveAndMarkButtons();
    })

    $('#update').on('click', function() {
        if(confirm("Are you sure to Mark these as COMPLETE?")){
                        var taskRow = $("#mylist tbody tr");

                        $.each(taskRow, function(i, row) {
                        if( $(this).find('td').eq(0).find("input").is(":checked") ) {
                                $(this).find('td').eq(3).text("Complete");
                                tasks[i].status = "Complete";
                                $(this).addClass('complete');             
                        }
                        });
                        $('tr')
        }
        uncheckAfterActionClick();
        toggleRemoveAndMarkButtons();
    })

    //check all
    $('#checkAll').click(function(){
            $(':checkbox').prop('checked', this.checked);
        });

        $('.cb').each(function(index){
                $('this').on("change", function(index) {
                    if (!this.checked) {
                        $("#checkAll").prop('checked', false);
                        return;
                    }
                });
        })

})


function toggleRemoveAndMarkButtons() {
        var howManyChecked = $('.cb:checked, .checkAll:checked').length;
        var disableButtons = howManyChecked == 0;
        $('#delete, #update').prop('disabled', disableButtons);
}

function uncheckAfterActionClick() {
        $('.cb, #checkAll').prop('checked', false);
    toggleRemoveAndMarkButtons();
}

//container style
$('.container').css({
        "width":"640px",
        "margin":"0 auto", 
        "text-align":"center"
});

$('#list-input').attr({'placeholder':"Input task description"});

<script src="http://ift.tt/1oMJErh"></script>
<div class="container">
                <input id="list-input" />
                <input id="task-status" value="New" type="hidden"/>
                <button id="add">Add To List</button>
                <button id="delete" class="delete" disabled>Remove From List</button>
                <button id="update" disabled>Mark as Complete</button>
        </div>
        <div class="container">
                <h1>Your Task</h1>
                
                <div>
                        <table id="mylist">
                                <thead>
                                        <tr>
                                                <th><input type="checkbox" id="checkAll" onchange="toggleRemoveAndMarkButtons()"/></th>
                                                <th>Task Number</th>
                                                <th>Description</th>
                                                <th>Status</th>
                                        </tr>
                                </thead>
                                <tbody>
                                </tbody>
                        </table>
                </div>
        </div>