Создание кнопки «Выбрать все» для выбора всех кнопок

Question

Итак, у меня есть таблица с несколькими строками. Я пытаюсь выбрать каждую строку с помощью кнопки; также в заголовке таблицы есть кнопка «Выбрать все», которая будет выбирать ВСЕ кнопки во всех строках. Вот HTML:

<table class="table" ng-controller="myController"> 
    <thead> 
    <tr class="info"> 
     <th>Company Name</th> 
     <th>Address</th> 
     <th> 
     <input type="button" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false"> 
     </th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="company in fieldData"> 
    <tr> 
    <td>{{ company.name }}</td> 
    <td>{{ company.address }}</td> 
    <td style="text-align: center"> 
     <input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false"> 
    </td> 
    </tr> 
    </tbody> 
</table> 

Как я могу сделать функцию с помощью JQuery изменить Aria нажиму значения всех строк? Есть идеи?

Answer 1

Вы используете Angular js.

меня написать простой код, посмотрите

<div> 
<ul ng-controller="checkboxController"> 
    <li>Check All 
     <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /> 
    </li> 
    <li ng-repeat="item in Items"> 
     <label>{{item.Name}} 
      <input type="checkbox" ng-model="item.Selected" /> 
     </label> 
    </li> 
</ul> 

angular.module("CheckAllModule", []) 
.controller("checkboxController", function checkboxController($scope) { 

Угловая код здесь

$scope.Items = [{ 
    Name: "Item one" 
}, { 
    Name: "Item two" 
}, { 
    Name: "Item three" 
}]; 
$scope.checkAll = function() { 
    if ($scope.selectedAll) { 
     $scope.selectedAll = true; 
    } else { 
     $scope.selectedAll = false; 
    } 
    angular.forEach($scope.Items, function (item) { 
     item.Selected = $scope.selectedAll; 
    }); 

}; 

});

Answer 2

Установите в качестве опции галочку в поле «Выбрать все», затем используйте директиву ng-checked, чтобы выбрать/отменить выбор всех.

<table class="table" ng-controller="myController"> 
    <thead> 
    <tr class="info"> 
     <th>Company Name</th> 
     <th>Address</th> 
     <th> 
     <input type="button" ng-model="selectAll" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false"> 
     </th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="company in fieldData"> 
    <tr> 
    <td>{{ company.name }}</td> 
    <td>{{ company.address }}</td> 
    <td style="text-align: center"> 
     <input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false" ng-checked="selectAll"> 
    </td> 
    </tr> 
    </tbody> 
</table>