选中Angular/JavaScript中的所有复选框

Question

我想在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>

Answer 1

以下是javascript的方法。更改主复选框html如下。

<div class="form-groupCheckbox">
<input class="checkbox" name="confirmmain" onclick="selects()" id="confirmall" type="checkbox">
<label for="confirm1">  Selecionar todos  </label>
</div>

现在添加新的脚本，使复选框选中和取消选中

<script>
function selects(){  
var ele=document.getElementById('confirmall');  
if(ele.checked == true) {

var ele=document.getElementsByName('confirm');  

for(var i=0; i<ele.length; i++){  
if(ele[i].type=='checkbox')  
ele[i].checked=true;  
}  
} else {
var ele=document.getElementsByName('confirm');  
for(var i=0; i<ele.length; i++){  
if(ele[i].type=='checkbox')  
ele[i].checked=false;  

}  
}
}         
</script>

Answer 2

您可以做的是将每个复选框链接到某个变量，然后在用户选择select-all checkbox时使其全部为true。

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;
}
});
}