angularjs操作CheckBox单选、多选、全选、反选
应用场景:分页查询出列表中,对已勾选的数据跳转到下一页面进行展示。CheckBox可进行单选、多选、全选、反选。当所有都勾选上时,全选按钮选上,有一条数据取消勾选时,全选按钮取消勾选
js代码:
var arrData = new Array(); //选择查询出来的数据
$scope.markArr=new Array(); //选择的序号 跳到第二页回来回显
$scope.allClick=new Array(); //用于从第二页回到第一页时全选按钮回显
//点击全选
$scope.clickAll = function(current){
var e=e||event;
var target= e.srcElement? e.srcElement: e.target;
if (target.checked) {
$scope.allClick.push(current); //current为页数
$.each($scope.result,function(index,ele){
if(arrData.indexOf(($scope.result)[index])==-1){//防止重复添加
arrData.push(($scope.result)[index]); //将勾选的数据添加到arrData
$scope.markArr.push(($scope.resultXh.current-1)*$scope.resultXh.size+index); //将勾选到的序号添加到markArr中
}
});
} else { //取消全选
var l = $scope.allClick.indexOf(current);
$scope.allClick.splice(l,1);
$.each($scope.result,function(index,ele){
var i = arrData.indexOf(($scope.result)[index]);
arrData.splice(i,1);
var j = $scope.markArr.indexOf(($scope.resultXh.current-1)*$scope.resultXh.size+index);
$scope.markArr.splice(j,1);
});
}
}
//点击单选
$scope.checkClick = function (e,x) {
var e=e||event;
var target= e.srcElement? e.srcElement: e.target;
if (target.checked) {
arrData.push(($scope.result)[x]);
$scope.markArr.push(($scope.resultXh.current-1)*$scope.resultXh.size+x);
//全部勾选时,把全选按钮勾上
var allFlag = true;
$.each($scope.result,function(index,ele){
if(arrData.indexOf(($scope.result)[index])==-1){
allFlag = false;
return false;
}
});
if(allFlag){
$scope.allClick.push($scope.resultXh.current);
}
} else { //取消单选
var i = arrData.indexOf(($scope.result)[x]);
arrData.splice(i,1);
var j = $scope.markArr.indexOf(($scope.resultXh.current-1)*$scope.resultXh.size+x);
$scope.markArr.splice(j,1);
//全选标志去掉
var ind = $scope.allClick.indexOf($scope.resultXh.current);
if(-1!=ind){
$scope.allClick.splice(ind,1);
}
}
}
html:
<table class="tab01-cailiao">
<tr>
<th width="40"><input type="checkbox" ng-click="clickAll(resultXh.current)" ng-checked="-1!=allClick.indexOf(resultXh.current)"/</th>
<th width="50">序号</th>
</tr>
<tr ng-repeat="item in result">
<td><input ng-checked="-1!=markArr.indexOf((resultXh.current-1)*resultXh.size+$index)" type="checkbox" ng-click="checkClick($event,$index)"/></td>
<td ng-bind="(resultXh.current-1)*resultXh.size+$index+1"></td>
</tr>
</table>