Enable all checkboxes with one checkbox click with Angular - html

Question

I have a table where I have a column name and near the column name I have a checkbox. That particular column name values inside the table by default are check boxes. What I need is that when I enable the checkbox near the column name, all the checkboxes in the table under that column should be enabled and when I disable the checkbox in column name all checkboxes in table under the column should also be disabled?
<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>
What I need is that when I enable the checkbox near the column name status, all the checkboxes in the table under that column should be enabled and when I disable the checkbox in column name all checkboxes in table under the column should also be disabled?

Answer 1

You can give class to checkbox and with jQuery you can check enable or disable:
.attr("disabled",true)
.attr("disabled",false)

Answer 2

remove "vehicle1" id from <td> elements, then copy and paste script given below.
<script>
$(document).ready(function($){
$("#vehicle1").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
});
</script>
In Angular
<label class="btn btn-filter">
<input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)">All Trades
</label>
<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>
</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);
}
}