如何使用 AngularJS 选中/取消选中所有复选框？答案

【问题标题】：How to check/uncheck all check boxes using AngularJS?如何使用 AngularJS 选中/取消选中所有复选框？
【发布时间】：2014-11-18 23:16:06
【问题描述】：

我是 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 中的代码检查和取消选中所有复选框，但它没有考虑其中一些是否被手动选中/取消选中，这意味着它不能正常工作。

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

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案1】：

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>

【讨论】：

我还需要通过以下方式更改按钮上的文本：当所有复选框都被选中时，反之亦然。
@tesicg 以及仅选中一个“复选框”时应显示哪个按钮？
应该只有一个按钮，而不是两个。
@tesicg 好的，但是如果选中了一个复选框，那是哪一个？
我对这个解决方案还有一个问题 - 为什么当页面上存在
标签时这段代码会回发？

【解决方案2】：

我一直在为复选框使用this 指令。它很简单，并且有您需要的示例。

【讨论】：