javascript - 选中 Angular/JavaScript 中的所有复选框
问题描述
我想选择 Angular/JavaScript 中的所有复选框,我尝试了一些不起作用的方法。
全选的校验码是这个:
<div class="form-groupCheckbox">
<input class="checkbox" name="confirm" id="confirm1" type="checkbox">
<label for="confirm1"> Selecionar todos </label>
</div>
当我单击“全选”框时,我想在此处选中所有这些框
<input class="checkbox" name="confirm" id="confirm1" type="checkbox">
<label for="confirm1"> xx </label>
<input class="checkbox" name="confirm" id="confirm2" type="checkbox">
<label for="confirm1"> ff </label>
<input class="checkbox" name="confirm" id="confirm3" type="checkbox">
<label for="confirm1">rr </label>
解决方案
您可以做的是将每个复选框链接到某个变量,然后true
在用户选择时将它们全部生成select-all checkbox
。
HTML 文件将如下所示:
<div class="form-groupCheckbox">
<input class="checkbox" name="confirm" id="confirm1" type="checkbox" #selectAll (change)="onSelectAllChange(selectAll.value)">
<label for="confirm1"> Selecionar todos </label>
</div>
<ng-container *ngFor="let checkbox of checkboxes">
<input class="checkbox" name="confirm" [(ngModel)]="checkbox.value" id="{{checkbox.id}}" type="checkbox">
<label for="confirm1"> {{checkbox.label}} </label>
</ng-container>
TypeScript 文件将如下所示:
public checkboxes = [
{
value: false,
id: 'checkbox_1',
lablel: 'Label 1'
},
{
value: false,
id: 'checkbox_2',
lablel: 'Label 2'
},
{
value: false,
id: 'checkbox_3',
lablel: 'Label 3'
}
];
onSelectAllChange(value: boolean) {
checkboxes.forEach((checkbox: any) => {
if (value) {
checkbox.value = true;
} else {
checkbox.value = false;
}
});
}
推荐阅读
- qt - 在 Qt 中,forever 关键字有什么实际用途吗?
- javascript - 如何在 Kentico 中为电子邮件模板每三个表格单元格包装一行?
- javascript - 使用名称和坐标传单找到某个地方
- excel - VBA:在 IE 中搜索文本,打开链接,查找行复制文本,在 Excel 中插入
- r - 如何不坚持使用 Sparklyr?
- javascript - Javascript - for 循环中的 Axios。使用当前获取的响应进行下一次获取数据的迭代
- oracle - plsql 中的执行时间跟踪(代码分析)
- java - 使用共享首选项存储未提交的数据
- java - 你可以在没有服务器端的代号中实现自动更新订阅吗
- react-native - TypeError: undefined is not a function near this.state.cafes.map