欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

简单全选,反选,删除

程序员文章站 2022-05-31 10:56:50
...
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Title</title>-->
    <!--<script src="angular-1.3.0.js"></script>-->
    <!--<script>-->
        <!--var myapp = angular.module("myapp",[]);-->
        <!--myapp.controller("myCtrl",function ($scope) {-->
            <!--$scope.data = [-->
                <!--{id:1,-->
                    <!--check:false,-->
                    <!--title:"这是第一条数据"-->
                <!--},-->
                <!--{id:2,-->
                    <!--check:false,-->
                    <!--title:"这是第二条数据" },-->
                <!--{id:3,-->
                    <!--check:false,-->
                    <!--title:"这是第三条数据" },-->
                <!--{id:4,-->
                    <!--check:false,-->
                    <!--title:"这是第四条数据" }-->
            <!--];-->
            <!--var a = 0;-->
            <!--var j= 0;-->
            <!--//点击按钮进行判断，查看勾选了几个-->
            <!--$scope.add = function (index) {-->
                <!--if($scope.data[index].check == true){-->
                    <!--a++;-->
                    <!--j = index;-->
                <!--}else{-->
                    <!--a--;-->
                <!--}-->
                <!--console.log(a)-->
            <!--}-->
            <!--//点击确定按钮进行判断-->
            <!--$scope.sure = function () {-->
                <!--if(a==0){-->
                    <!--alert("请勾选")-->
                <!--}else if(a>=2){-->
                    <!--alert("只能勾选一个")-->
                <!--}else{-->
                    <!--alert(j)-->
                <!--}-->
            <!--}-->
        <!--})-->
    <!--</script>-->
<!--</head>-->
<!--<body ng-app="myapp" ng-controller="myCtrl">-->
<!--<button ng-click="sure()">确认</button>-->
<!--<table>-->
    <!--<tr ng-repeat="item in data">-->
        <!--<td><input type="checkbox" ng-click="add($index)" ng-model="item.check">{{item.title}}</td>-->
    <!--</tr>-->
<!--</table>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding:10px;
            border: 1px solid #000000;
        }
    </style>
    <script src="angular-1.3.0.js"></script>
    <script>
        var myapp = angular.module("myapp",[])
        myapp.controller("myCtrl",function ($scope) {
            $scope.data = [{
                id:1,
                name:"zs",
                age:13,
                sex:"男",
                check: false
            },
                {
                    id:2,
                    name:"ls",
                    age:23,
                    sex:"男",
                    check: false
                },
                {
                    id:3,
                    name:"ww",
                    age:16,
                    sex:"男",
                    check: false
                },
                {
                    id:4,
                    name:"zl",
                    age:54,
                    sex:"男",
                    check: false
                }];

            //全选
            $scope.checkstate = false;
            $scope.checkAll = function () {
                if($scope.checkstate==true){
                    for(var i = 0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else{
                    for(var i = 0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            }
            //反选
            var a = 0;
            $scope.checkLL = function (index) {
                if($scope.data[index].check == true){
                    a++;
                }else{
                    a--;
                }
                console.log($scope.data.length)
                if(a==$scope.data.length){
                    $scope.checkstate=true;
                }else{
                    $scope.checkstate=false;
                }
            }

            //删除
            $scope.del = function () {
                for(var i = 0;i<$scope.data.length;i++){
                    if($scope.data[i].check ==true){
                        $scope.data.splice(i,1)
                        i--;

                    }
                }
            }

        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<button ng-click="del()">删除选中项</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="checkstate" ng-click="checkAll()"></th>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-click="checkLL($index)" ng-model="item.check"></td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>

简单全选,反选,删除

上一篇： 抖音发长视频方法（抖音发5分钟长视频的条件 ）

下一篇： html全选反选功能

推荐阅读