天天看点

angularjs操作CheckBox单选、多选、全选、反选

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>