创建“;“全选”;按钮选择所有按钮

Creating "select all" button to select all buttons

本文关键字：按钮 选择 全选 创建      更新时间：2024-07-04

所以，我有一个有多行的表。我试着用一个按钮来选择每一行；此外，在表格标题中，有一个全选按钮，它将选择所有行中的所有按钮。这是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压缩值？有什么想法吗？

您使用的是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;
    });
};

})；

在"全选"复选框上设置一个ng模型，然后使用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>
相关文章：