Traversal checkbox using jQuery

I want to make checkbox such that if parent checkbox is checked then all the children checkbox is clicked. and if any of the children checkbox is clicked then parent checkbox is clicked. I have written code but it is not working properly. When I uncheck child checkbox then parent checkbox got unchecked despite having other child checkbox being clicked.

HTML:

<label for="firstParent"><input type="checkbox" id="firstParent"/>Property</label>
            <ul class="first-parent-child">
                <li>
                    <lable><input type="checkbox" class="child-1" id="f-1"/> Edit Property</lable>
                </li>

                <li>
                   <lable><input type="checkbox" class="child-1" id="f-2"/> Add Property</lable>
                 </li>

                 <li>
                    <lable><input type="checkbox" class="child-1" id="f-3"/> Remove Property</lable>
                </li>
            </ul>

jQuery:

$("#firstParent").on('change', function() {
        $('.child-1').prop('checked', this.checked);
    });

$(".child-1").on('change', function() { $('#firstParent').prop('checked', this.checked); });