如果选中或未选中任何其他复选框，如何选中或取消选中“全选”复选框答案

【问题标题】：How to check or unCheck the "Select ALL" check box, if any one of the other check boxes are checked or unchecked如果选中或未选中任何其他复选框，如何选中或取消选中“全选”复选框
【发布时间】：2016-08-04 20:34:04
【问题描述】：

第 1 项操作：我有一个超级复选框标签为“全选”，还有 10 个其他复选框。如果 Select All 复选框为 check ，则应选中所有其他复选框。如果未选中 Select ALL 复选框，则应取消选中所有其他复选框。这工作正常

第 2 次行动：

如果选中了所有复选框，如果我取消选中任何一个复选框，则未选中 Select ALL 复选框。这工作正常。

我想要的是如果 9 个复选框被选中，只有第 10 个和全选未选中，当我选中第 10 个复选框时，“全选”复选框保持未选中状态如何使其检查是否所有其他选中复选框被选中。

下图，当所有复选框都被选中时。

如果我取消选中这 10 个复选框中的任何一个，“全选”复选框将变为取消选中，这是正确的。

enter image description here

如果我选中“操作”复选框，则所有复选框都已选中，但“全选”复选框仍未选中，应该选中，因为所有复选框都已选中。

enter image description here

我找不到怎么做，如果有人知道，请帮助我。

我的代码是：

$scope.itemClicked = function($index){
  if($index == 0){
    for(var i=0; i<languagePreference.length; i++){
      languagePreference[i].checked = languagePreference[0].checked;
     }
   }else{
     languagePreference[0].checked = false;
    }
 };

<div class="list" ng-controller="LangPrefController">
     <ion-checkbox ng-repeat="item in languagePreference"
                   ng-model="item.checked"                  
                   ng-click="itemClicked($index)">{{item.text}}
     </ion-checkbox>
</div>

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案1】：

要实现你想要的，你可以做这些事情：

要选择/取消选择所有checkboxes，您可以简单地循环遍历元素并将所有checked 属性设置为true/false。
要以编程方式选择/取消选择此复选框，您可以使用Array.prototype.every() 方法，该方法返回是否选择了所有复选框，如果选择了所有元素，则该选项也将/保持选中，否则，它将被/保持取消选择。

这是一个演示：

(function() {
  'use strict';
  
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.languagePreference = [];

    function loadData() {
      var arr = [];
      for (var i = 1; i <= 5; i++) {
        arr.push({
          "name": "Language " + i
        });
      }
      return arr;
    }

    $scope.languagePreference = loadData();

    $scope.itemClicked = function() {
      $scope.selectedAll = $scope.languagePreference.every(function(item) {
        return item.checked;
      });
    }

    $scope.selectAll = function() {
      $scope.languagePreference.map(function(item) {
        item.checked = $scope.selectedAll;
      });
    }
  }
})();

<!DOCTYPE HTML>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <div class="col-md-12">
    <div class="checkbox" ng-repeat="item in languagePreference">
      <label>
        <input type="checkbox" ng-model="item.checked" ng-click="itemClicked()">{{item.name}}
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"> Select All
      </label>
    </div>
  </div>
</body>

</html>

【讨论】：

先生，您在单独的班级中使用全选，但我的全部来自单个班级，我们可以这样做吗？？？
您的意思是Select All 选项是array 的一项吗？？
是的，所有的复选框都应该来自单个数组？
不，不应该。上面应该是这样的。一个普通的项目数组和一个用于选择/取消全选的自定义分隔选项。