[英]Select all checkboxes in Angular/ JavaScript
I want to Select all checkboxes in Angular/JavaScript, I tried a few ways that didn't work.我想 Select Angular/JavaScript 中的所有复选框,我尝试了一些不起作用的方法。
the check code that is to select all is this one: select 的校验码都是这个:
<div class="form-groupCheckbox">
<input class="checkbox" name="confirm" id="confirm1" type="checkbox">
<label for="confirm1"> Selecionar todos </label>
</div>
I want to check all these boxes here when I click on the "select all" box当我单击“全选”框时,我想在此处选中所有这些框
<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>
What you can do is to link each of the checkboxes to some variable and then just make them all true
when user select select-all checkbox
.您可以做的是将每个复选框链接到某个变量,然后在用户 select
select-all checkbox
时使它们全部为true
。
HTML file will look like this: 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 file will look like this: 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;
}
});
}
Here is the way for javascript.这是 javascript 的方法。 Change main checkbox html as following.
更改主复选框 html 如下。
<div class="form-groupCheckbox">
<input class="checkbox" name="confirmmain" onclick="selects()" id="confirmall" type="checkbox">
<label for="confirm1"> Selecionar todos </label>
</div>
Now add new script that makes checkbox check and uncheck现在添加使复选框选中和取消选中的新脚本
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.