使用 Angular 只需单击一次复选框即可启用所有复选框

Posted 2023-03-05

【中文标题】使用 Angular 只需单击一次复选框即可启用所有复选框

【英文标题】：Enable all checkboxes with one checkbox click with Angular

【发布时间】：2021-02-21 03:40:51

【问题描述】：

我有一个表，其中有一个列名，在列名附近我有一个复选框。默认情况下，表内的特定列名值是复选框。我需要的是，当我启用列名附近的复选框时，应该启用该列下表格中的所有复选框，当我禁用列名中的复选框时，列下表格中的所有复选框也应该被禁用？

<div class="Container">

  <div class="table-responsive">
    <table class="table">
      <thead class="table_header">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
          <th>Old date</th>
          <th>New date</th>
          <th>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> Status
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let form of formlist; index as i">
          <td> form.name </td>
          <td>form.cat </td>
          <td>form.olddate </td>
          <td> form.newdate </td>
          <td>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我需要的是，当我启用列名状态附近的复选框时，应该启用该列下表格中的所有复选框，并且当我禁用列名中的复选框时，该列下表格中的所有复选框也应该是禁用？

【问题讨论】：

您在使用 FormArray 吗？尝试提供一个 stackblitz 示例

而你做错了。 ID 在页面中应该是唯一的。你不应该对多个元素使用vehicle1 id

请出示您的组件代码。您必须在组件中编写代码，因此我们必须了解如何构建 formlist 数组。

你可以简单的写一个onclick函数。不需要comp ts代码。我没有使用表单数组

【参考方案1】：

您可以为复选框指定类，并且使用 jQuery 您可以检查启用或禁用：

.attr("disabled",true)
.attr("disabled",false)

【讨论】：

我在角度工作。你能写代码吗？

【参考方案2】：

从<td> 元素中删除“vehicle1” id，然后复制并粘贴下面给出的脚本。

<script>
$(document).ready(function($)

 $("#vehicle1").click(function () 
     $('input:checkbox').not(this).prop('checked', this.checked);
 );

);
</script>

在 Angular 中

<label class="btn btn-filter">
  <input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)">All Trades
</label>&nbsp;
<ng-container *ngFor="let trd of trade">
  <label class="btn btn-filter">
    <input type="checkbox" name="trades" [checked]="trd.selected" (change)="changeTradesByCategory($event)"> trd.label 
  </label>&nbsp;
</ng-container>

export class AppComponent  
  name = 'Angular';

 trade = [
     label: 'aa', selected: false , 
     label: 'bb', selected: false , 
     label: 'cc', selected: false , 
     label: 'dd', selected: false 
  ];

allTrades(event) 
    const checked = event.target.checked;
    this.trade.forEach(item => item.selected = checked);
  

【讨论】：

你可以对角度说同样的话

我试过了，但我想要表中没有标签的值。就像只有复选框。在此代码中，它带有贸易列表中的标签值。如果我删除该列表或输入空标签，则复选框不会出现

@ExpertLabs 只需从 html 中删除 trd.label ...

我试过了，但它在复选框中显示了空值