全选取消全选单选

Posted chen-jian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了全选取消全选单选相关的知识,希望对你有一定的参考价值。

<!--html-->

<table class="table1">
<thead>
<tr>
<th> <input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()"> </th>
<th>合同编号</th>
<th>合同名称</th>
<th>分配公司</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in lists">
<td> <input type="checkbox" ng-model="list.checked" ng-change="selectOne()"> </td>
<td>{{list.contractnum}}</td>
<td>{{list.template.name}}</td>
<td>{{list.office.name}}</td>
<td>{{list.updateDate}}</td>
</tr>
</tbody>
</table>

 

<!--js-->

 

$scope.checked = [];//用来存放选中项的id
$scope.select_all = “”;
$scope.list = {
checked: “”
}

//全选
$scope.selectAll = function() {
if($scope.select_all) {
$scope.checked = [];
angular.forEach($scope.lists, function(i) {
i.checked = true;
$scope.checked.push(i.id);
})
} else {
angular.forEach($scope.lists, function(i) {
i.checked = false;
$scope.checked = [];
})
}
};

//单选
$scope.selectOne = function() {
angular.forEach($scope.lists, function(i) {
var index = $scope.checked.indexOf(i.id);
if(i.checked && index === -1) {
$scope.checked.push(i.id);
} else if(!i.checked && index !== -1) {
$scope.checked.splice(index, 1);
};
})

if($scope.lists.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
}

 

以上是关于全选取消全选单选的主要内容,如果未能解决你的问题,请参考以下文章

使用vue实现全选与取消全选

js 全选选框与取消全选代码

jquery实现全选 我全选后,取消全选,再点击全选,却选不上。我手动选上,然后点击取消全选,能够取消。

jQuery实现全选框选中时选中所有复选框,取消其中一个就会取消全选框,全部选中则选中全选所在的复选框

表单全选取消全选

如何实现复选框的全选和取消全选效果