Javascript 如何在我的案例中选中所有复选框？

我试图以angular的方式选中所有

复选框

我有以下代码：

 <div>
     <div class="checkbox">
          <input ng-click="checkAll =! checkAll" type="checkbox"/> check all
     </div>
     <div class="checkbox" ng-repeat="item in items">
          <input type="checkbox" ng-model="checkAll"/> {{item.title}}
     </div>
</div>


全部检查
{{item.title}

当我点击
全选
时，我能够选中所有
复选框
，但是，如果我选中并取消选中个人
复选框
，
全选
似乎不再应用于个人
复选框
。有人能帮我解决这个问题吗？非常感谢
 修改后的答案：

另一个答案的替代方法是：


对于主复选框，您也应该将
checkAll
作为
ng model
，而不是作为单击事件

您遇到的问题是由于为每次重复创建了一个范围。
修改后的答案：

另一个答案的替代方法是：


对于主复选框，您也应该将
checkAll
作为
ng model
，而不是作为单击事件

您遇到的问题是由于为每次重复创建范围。
您没有显示您的
$scope.items
的外观。如果它是一个基元数组，那么这就是一个问题
ng repeat
将为从父范围继承的每个项目创建一个新范围。问题是，对于原语，它只生成值的一个副本，而失去了双向绑定。相反，将项目设置为对象数组，如下所示：

$scope.items = [
  {name: 'a', checked: false}, 
  {name: 'b', checked: false}, 
  {name: 'c', checked: false}
];

<div class="checkbox">
      <input type="checkbox" ng-click="checkAllBoxes()" /> check all
</div>
<div class="checkbox" ng-repeat="item in items">
      <input type="checkbox" ng-model="item.checked"/> {{item.name}}
</div>

您还应该为“全选”复选框设置一个单独的变量

$scope.checkAll = false;

现在，创建一个函数来循环所有项目，并设置
checked
属性：

$scope.checkAllBoxes = function(){
    $scope.checkAll = !$scope.checkAll;
    angular.forEach($scope.items, function(item){
      item.checked = $scope.checkAll;
    })
}

像这样把它包扎起来：

$scope.items = [
  {name: 'a', checked: false}, 
  {name: 'b', checked: false}, 
  {name: 'c', checked: false}
];

<div class="checkbox">
      <input type="checkbox" ng-click="checkAllBoxes()" /> check all
</div>
<div class="checkbox" ng-repeat="item in items">
      <input type="checkbox" ng-model="item.checked"/> {{item.name}}
</div>


全部检查
{{item.name}

您没有显示您的
$scope.items
的外观。如果它是一个基元数组，那么这就是一个问题
ng repeat
将为从父范围继承的每个项目创建一个新范围。问题是，对于原语，它只生成值的一个副本，而失去了双向绑定。相反，将项目设置为对象数组，如下所示：

$scope.items = [
  {name: 'a', checked: false}, 
  {name: 'b', checked: false}, 
  {name: 'c', checked: false}
];

<div class="checkbox">
      <input type="checkbox" ng-click="checkAllBoxes()" /> check all
</div>
<div class="checkbox" ng-repeat="item in items">
      <input type="checkbox" ng-model="item.checked"/> {{item.name}}
</div>

您还应该为“全选”复选框设置一个单独的变量

$scope.checkAll = false;

现在，创建一个函数来循环所有项目，并设置
checked
属性：

$scope.checkAllBoxes = function(){
    $scope.checkAll = !$scope.checkAll;
    angular.forEach($scope.items, function(item){
      item.checked = $scope.checkAll;
    })
}

像这样把它包扎起来：

$scope.items = [
  {name: 'a', checked: false}, 
  {name: 'b', checked: false}, 
  {name: 'c', checked: false}
];

<div class="checkbox">
      <input type="checkbox" ng-click="checkAllBoxes()" /> check all
</div>
<div class="checkbox" ng-repeat="item in items">
      <input type="checkbox" ng-model="item.checked"/> {{item.name}}
</div>


全部检查
{{item.name}

see:：see:：您的演示不起作用。每个复选框都执行相同的操作（选择/取消选择所有复选框）。只有“全选”才能选中所有框。a、 b和c应该独立工作。@Jerrad认为这是他想要的，现在我看我误读了。在上面，你的演示不起作用。每个复选框都执行相同的操作（选择/取消选择所有复选框）。只有“全选”才能选中所有框。a、 b和c应该独立工作。@Jerrad认为这是他想要的，现在我看我误读了。在上面。