Javascript “选择所有三态”复选框有问题

我有一个复选框列表——两个父母，每个父母有5个孩子。 父项应具有3种状态（选中、未选中、不确定）。 现在，我的代码正在运行，但我正在尝试添加一个“全选”复选框， 这将选择两个父母和他们所有的孩子

我尝试在上面再添加一个标签：

    <label>
    <input type="checkbox" data-indeterminate-checkbox data-child- 
     list="model.people" data-property="eaten" data-ng- 
     model="model.allEaten"> All eaten
    </label>

.person{
边缘底部：20px；
}
.儿童名单{
左边距：20px；
}

全吃了
{{person.name}[全部吃掉：{{person.allEaten}]
{{fruit.type}

删除指令并添加以下html

<label>
    <input style="-webkit-appearance:checkbox" type="checkbox" ng-model="model.allEaten" ng-click="selectAllEaten(model.allEaten)"> 
     allEaten {{model.allEaten}}
</label>
<div ng-repeat="person in model.people">
    <label>
        <input style="-webkit-appearance:checkbox" ng-checked="person.selected" type="checkbox" ng-model="person.selected" ng-click="selectByPerson(person)">
        {{person.name}}
    </label>
    <div ng-repeat="fruit in person.fruits" style="margin-left:20px;">
        <label>
            <input style="-webkit-appearance:checkbox" ng-checked="fruit.selected" type="checkbox" ng-model="fruit.eaten">
            {{fruit.type}}
        </label>
    </div>
</div>

---

是否进行进一步验证，如检查父项（如果所有子项都已检查）等

是否可以在此处共享代码的相关部分？你说的“不工作”到底是什么意思？您试图调试问题的原因是什么？不起作用-复选框未连接到家长和孩子。当你勾选/取消勾选“全部吃掉”时，什么也没有发生，但是，你尝试过解决这个问题吗？点击会触发任何JS代码吗？该代码是否选择了正确的复选框？它不应该触发任何函数，它应该监视该输入的子项，并根据这些更改-它应该自动被选中、取消选中

$scope.selectAllEaten = function (x) {
    if (x) {
        $scope.model.people.forEach(function (item) {
            item.selected = true;
            item.fruits.forEach(function (fruit) { fruit.selected = true; });
        });
    } else {
        $scope.model.people.forEach(function (item) {
            item.selected = false;
            item.fruits.forEach(function (fruit) { fruit.selected = false; });
        });
    }
}

$scope.selectByPerson = function(x){        
    if (x.selected) {
        x.fruits.forEach(function (fruit) { fruit.selected = true; });
    }else{
        x.fruits.forEach(function (fruit) { fruit.selected = false; });
    }
}