未选中父复选框时，子复选框运行代码

Question

我有一组父复选框和子复选框，每个复选框（父或子）都运行一段代码。当我选中父复选框时，父复选框运行它的代码，而子复选框则不运行它。但是，当我取消选中父复选框时，子复选框会运行其代码。这是一个示例代码：

HTML代码：

<li>
    <input type="checkbox" onclick="validate()"  name="Parent" id="Parent">
    <label for="Parent">Parent</label>
    <ul>
        <li>
            <input type="checkbox" onclick="validate()"  name="Child" id="Child">
            <label for="Child">Child</label>
        </li>
    </ul>
</li>

JavaScript代码：

$(function () {

    $('input[type="checkbox"]').change(function (e) {
        var checked = $(this).prop("checked"),
            container = $(this).parent(),
            siblings = container.siblings();

        container.find('input[type="checkbox"]').prop({
            indeterminate: false,
            checked: checked
        });

        function checkSiblings(el) {
            var parent = el.parent().parent(),
                all = true;

            el.siblings().each(function () {
                return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
            });

            if (all && checked) {
                parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                });
                checkSiblings(parent);
            } else if (all && !checked) {
                parent.children('input[type="checkbox"]').prop("checked", checked);
                parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                checkSiblings(parent);
            } else {
                el.parents("li").children('input[type="checkbox"]').prop({
                indeterminate: true,
                checked: false
                });
            }
        }

        checkSiblings(container);
    });
});

var validate=function(){
    if(document.getElementById("Parent").checked){alert("Parent!");}   
    if(document.getElementById("Child").checked){alert("Child!");}       
}