<!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>
贴上效果图：
贴上源码：
备注：没有注释，抱歉今天还是一个不擅长做一个注释的小可爱.......