如何使用AngularJS检查/取消选中所有复选框？

我是AngularJS中的新成员，尝试通过单击“引导”样式的“切换”按钮来实现检查/取消选中所有复选框。如何使用AngularJS检查/取消选中所有复选框？

标记：

<button id="toggle" class="btn btn-link btn-mini" ng-click="setActionTypesAllCheck()">Check all</button> 

<div class="row-fluid" ng-repeat="at in actionsQuery.actionTypes"> 
<div class="checkbox"> 
    <label><input type="checkbox" ng-model="at.checked">{{at.Description}}</label> 
</div> 
</div>

的JavaScript：

$scope.setActionTypesAllCheck = function() { 
    $.each($scope.actionsQuery.actionTypes, function (i, cb) { 
     cb.checked = !cb.checked; 
    }); 
};

此时在JavaScript检查，并取消选中所有复选框的代码，但它并没有考虑到，如果他们中的一些是手动选中/取消选中，这意味着它无法正常工作。

因此，我需要通过单击“切换”按钮来检查所有复选框，并将其名称更改为“取消全部”，无论是否选中某些复选框，反之亦然，即取消选中所有复选框并将其名称更改为“全部检查”，而不管是否选中某些复选框。

来源

2014-09-24 tesicg

var app = angular.module("app", []); 
 

 

 
function MainCtrl() { 
 

 
    var vm = this; 
 
    vm.message = "Welcome"; 
 
    vm.actionsQuery = 
 

 
    { 
 
     actionTypes: [ 
 

 
     { 
 
      checked: true, 
 
      Description: "Jon" 
 
     }, { 
 
      checked: false, 
 
      Description: "Bon" 
 
     }, { 
 
      checked: false, 
 
      Description: "Tim" 
 
     } 
 

 
     ] 
 
    }; 
 
    vm.selected = function() { 
 

 

 
    } 
 
    vm.checkoxesState = true; 
 

 
    vm.UpdateCheckboxes = function() { 
 

 

 
    angular.forEach(vm.actionsQuery.actionTypes, function(at) { 
 

 
     at.checked = vm.checkoxesState; 
 

 
    }); 
 
    vm.checkoxesState = !this.checkoxesState 
 

 

 
    }; 
 

 

 

 

 
} 
 

 

 

 

 

 
angular.module("app").controller("MainCtrl", MainCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="app"> 
 

 
<body ng-controller="MainCtrl as vm"> 
 
    <div class="container"> 
 
    <h3>{{vm.message}}</h3> 
 
<form> 
 
    <button id="toggle" class="btn btn-link btn-mini" ng-click="vm.UpdateCheckboxes()"> 
 
     <span ng-show="vm.checkoxesState"> Check all </span> 
 
     <span ng-hide="vm.checkoxesState"> Uncheck All </span> 
 
    </button> 
 

 

 
    <div class="row-fluid" ng-repeat="at in vm.actionsQuery.actionTypes"> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input type="checkbox" ng-model="at.checked">{{at.Description}}</label> 
 
     </div> 
 
    </div> 
 
    </form> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

来源

2014-09-24 13:01:05 sylwester

我需要更改为按钮上的文本以及以下方式：当所有复选框都选中为“取消全部取消”，反之亦然。 – tesicg 2014-09-24 13:05:26

@tesicg以及只有一个“复选框”被选中时应该显示哪个按钮？ – sylwester 2014-09-24 13:11:28

应该只有一个按钮，而不是两个。 – tesicg 2014-09-24 13:17:14

我一直在使用this指令的复选框。它很简单，它有你需要的例子。

来源

2014-09-24 13:03:15 Luffy

yes..very nice one .. – gsk 2015-03-12 06:01:10

如何使用AngularJS检查/取消选中所有复选框？

回答

相关问题