Angular 角度-选中/取消选中所有复选框
我的工作是执行以下功能。我有3个复选框,选择其中一个后,我希望另外两个也被选中 我使用一个现成的组件来创建复选框Angular 角度-选中/取消选中所有复选框,angular,forms,checkbox,Angular,Forms,Checkbox,我的工作是执行以下功能。我有3个复选框,选择其中一个后,我希望另外两个也被选中 我使用一个现成的组件来创建复选框 <form [formGroup]="data" name="name" > <div class="form-group"> <div class="form__element"> <nb-checkbox name="grou
<form [formGroup]="data" name="name" >
<div class="form-group">
<div class="form__element">
<nb-checkbox name="groupname" value="Check All" label="Check All" formControlName="isAgree" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}"></nb-checkbox>
</div>
</div>
<div class="features__box">
<section class="agreements">
<ul class="features__list">
<li class="features__item" *ngFor="let agreement of data.agreements.value">
<div class="form__element">
<nb-checkbox name="groupname" value={{agreement.description}} label={{agreement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
</div>
</li>
</ul>
</section>
<section class="statements">
<ul class="features__list">
<li class="features__item" *ngFor="let statement of data.statements.value">
<div class="form__element">
<nb-checkbox name="groupname" value={{statement.description}} label={{statement.description}} [checked]="myVar2" (change)="myVar2 = !myVar2"></nb-checkbox>
</div>
</li>
</ul>
</section>
</div>
</form>
我已经从'@angular/forms'导入了模块import{FormsModule,ReactiveFormsModule};从'@ngxs/store'导入{NgxsModule}代码>
有人知道如何解决这个问题吗?根据我们在评论中的讨论更新我的答案,以选中/取消选中所有复选框
组件。ts
checklist
checkUncheckAll(evt) {
this.checklist.forEach((c) => c.isSelected = evt.target.checked)
}
ngOnInit() {
this.checklist = [
{id:1,value:'Elenor Anderson',isSelected:false},
{id:2,value:'Caden Kunze',isSelected:false},
{id:3,value:'Ms. Hortense Zulauf',isSelected:false},
{id:4,value:'Grady Reichert',isSelected:false},
{id:5,value:'Dejon Olson',isSelected:false},
{id:6,value:'Jamir Pfannerstill',isSelected:false},
{id:7,value:'Aracely Renner DVM',isSelected:false},
{id:8,value:'Genoveva Luettgen',isSelected:false}
];
}
在模板中
<div class="container">
<div class="text-center mt-5">
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" name="list_name" value="m1" (change)="checkUncheckAll($event)"/> <strong>Select/ Unselect All</strong>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of checklist">
<input type="checkbox" [checked]="item.isSelected" name="list_name" value="{{item.id}}"/>
{{item.value}}
</li>
</ul>
</div>
</div>
</div>
</div>
-
选择/取消选择全部
-
{{item.value}}
工作您需要导入NbCheckboxModule
但nb复选框是我的自定义组件,我不使用您建议的ui库我看到了,您说您使用的是现成的组件,并以nb-
前缀命名,所以我想使用库,所以您使用的是您自己的自定义代码,对吗,这是我的复选框看起来像“Doe”你的确切要求是什么,您需要一个表单,其中列出多个复选框,一个带有“全选”标签的父复选框,您需要单击该父复选框,所有其他复选框都应选中?我希望页面上有多个复选框,然后单击其中一个复选框,然后将其全部选中。
<div class="container">
<div class="text-center mt-5">
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" name="list_name" value="m1" (change)="checkUncheckAll($event)"/> <strong>Select/ Unselect All</strong>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of checklist">
<input type="checkbox" [checked]="item.isSelected" name="list_name" value="{{item.id}}"/>
{{item.value}}
</li>
</ul>
</div>
</div>
</div>
</div>