<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <body> <div ng-app='myApp' ng-controller='myCtrl'> <div class="container"> <div class="row"> <div class='col-md-10'> <table class="table table-bordered"> <thead> <tr> <th> <input type="checkbox" ng-model='masterChecked' ng-click='checkMaster()' /> </th> <th>id</th> <td>name</td> <td>age</td> </tr> </thead> <tbody> <tr ng-repeat="item in personList"> <td> <input type="checkbox" ng-checked='item.checked' ng-click='checkChild(item)' /> </td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </tbody> </table> </div> </div> </div> </div> <script> var myApp = angular.module('myApp', []); myApp.controller('myCtrl', function ($scope) { //初始化表格数据 $scope.personList = [{ checked: true, id: 1, name: '赵云', age: 50 }, { checked: true, id: 2, name: '曹操', age: 60 }, { checked: true, id: 3, name: '大司马', age: 50 }]; $scope.masterChecked = true //主复选框选中事件 $scope.checkMaster = function () { if ($scope.masterChecked == true) { angular.forEach($scope.personList, function (item, index) { item.checked = true; }); } else { angular.forEach($scope.personList, function (item, index) { item.checked = false; }); } } //子复选框选中事件 $scope.checkChild = function (item) { //根据选中状态，调正v.checked值 (item.checked == false) ? item.checked = true : item.checked = false; //若取消选中，则取消主复选框选中 if (item.checked == false) { $scope.masterChecked = false; } else { //若选中，判断主复选框是否需要选中 var temp = true; angular.forEach($scope.personList, function (item, index) { //若子复选框有一个未选中，则主复选框不必选中 if (item.checked == false) { temp = false; } }); //若子复选框全部选中，则选中主复选框 $scope.masterChecked = temp; } } }); </script> </body> </html>
贴上效果图：
贴上源码：
备注：没有注释，抱歉今天还是一个不擅长做一个注释的小可爱.......