How to check and uncheck the checkboxes when clicking on the link?

I have to check and uncheck the checkboxes inside a certain div when clicking on a link inside the same div. I have to have the same type of code but, I need the script to work perfectly too. I must have the checkboxes inside the children and the button should also be a child. The HTML code is below.

<div class="parent">

<div class="child">

    <a class="filter-check-btn">button</a>

    <div class="all-checkboxes">
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
    </div>

</div>

<div class="child">

    <div class="all-checkboxes">
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
        <div class="sep-chk">
            <label class="rad">
                <input class="filter-chk-box" type="checkbox" checked> Checkbox
            </label>
        </div>
    </div>

</div>
</div>

And the script is below

$(".filter-check-btn").on('click', function() {
    $(this).toggleClass('active');
    $(this).parent().parent().children(".filter-chk-box").prop('checked', false);
});

$(".filter-check-btn.active").on('click', function() {
    $(this).toggleClass('active');
    $(this).parent().parent().children(".filter-chk-box").prop('checked', true);
});