Select / deselect check boxes not working as expected using .closest('table').find('tbody > tr')

I have following simple table and managed to select / deselect all check boxes by clicking on the check box in the head of the table.

Also: when I click on th check box, all other check boxes are selected and when I click the th check box once again, all other check boxes are deselected.

The problem is so: when all check boxes are selected and I click in one of those other check boxes, it is deselected, but the th check box should be automatic deselect as well, what doesn't occur.

And on the other side, when 2 of the check boxes are selected and I click on the last one, the th check box should be also selected, what doesn't occur as well.

Does anybody has an idea how I could manage to do this in this specific code?

Here the javascript:

    // Select / deselect check boxes on free text search page.

    jQuery(function($) {

        // Select / deselect all rows according to table header checkbox.

        var active_class = 'active';

        $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){

            var th_checked = this.checked; // Checkbox inside "TH" table header.



            $(this).closest('table').find('tbody > tr').each(function(){

                    var row = this;

                    if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);

                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);

            });
        });



        // Select / deselect a row when the checkbox is checked / unchecked.

        $('#simple-table').on('click', 'td input[type=checkbox]' , function(){

            var $row = $(this).closest('tr');

            if(this.checked) $row.addClass(active_class);

            else $row.removeClass(active_class);

        });

    });

and here the html:

<table id="simple-table" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="center">
                <label class="pos-rel">
                    <input class="ace" type="checkbox" />
                        <span class="lbl"></span>
                </label>
            </th>
            <th>Areas:</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="center">
                <label class="pos-rel">
                    <input class="ace" name="ma1" type="checkbox" value="1" checked="" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <span>Option 01</span>
            </td>
        </tr>

        <tr>
            <td class="center">
                <label class="pos-rel">
                    <input class="ace" name="ma2" type="checkbox" value="1" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <span>Option 02</span>
            </td>
        </tr>

        <tr>
            <td class="center">
                <label class="pos-rel">
                    <input class="ace" name="ma3" type="checkbox" value="1" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <span>Option 03</span>
            </td>
        </tr>

    </tbody>
</table>

I've tried upon others to add following code, but nothing has worked:

            var tr_checked = this.checked; // Checkboxes checked.
            $(this).closest('table').find('tbody > tr').each(function(){

                    var row = this;

                    if(tr_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);

                    else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);

            });

I would appreciate if you could help me using this approach to make it work.