Question

操作1：我有一个超级复选框标签为“全选”，另外10个复选框。如果选中“全选”复选框，则应检查所有其他复选框。如果取消选中“全选”复选框，则应取消选中所有其他复选框。这工作正常

第2号行动：

如果选中了所有复选框，如果取消选中任何一个复选框，则取消选中“全选”复选框。这很好。

我想要的是如果选中了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>

Answer 1

为了达到你想要的目的，你可以做这些事情：

要选择/取消选择所有checkboxes，您只需循环播放元素并将所有checked 属性设置为true/false。< / p>
要以编程方式选择/取消选中此复选框，您可以使用Array.prototype.every()方法，如果选中了所有复选框，则会返回，如果选择了所有元素，则选择了/保持选项，否则，它会被/取消选择。

这是演示：

＆＃13;

(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;
      });
    }
  }
})();

＆＃13;

<!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>

＆＃13;

如果选中或取消选中其他任何一个复选框，如何选中或取消选中“全选”复选框

1 个答案: