angularJS處理table中checkbox的選中狀態

本文轉載自查看原文 2019-06-09 17:27 686 AngularJs

<!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>

貼上效果圖：

貼上源碼：

備注：沒有注釋，抱歉今天還是一個不擅長做一個注釋的小可愛.......

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於在layui中的table checkbox 默認選中設置 html中radio、checkbox選中狀態研究 table 中checkbox獲取選中行的所有列的數據 html5中checkbox的選中狀態的設置與獲取實現table中checkbox復選框、以及判斷checked是否被選中、js操作checkedbox選中 angularJs 處理多選框（checkbox） bootstrap table checkbox 根據值選中、禁用等 bootstrap table checkbox獲得選中得數據 layui table 點擊行事件選中checkbox thymeleaf控制checkbox的選中狀態回顯