在条件下选择或取消选中复选框
提问于 2017-01-05 05:04:52
请注意，我希望避免jquery，只使用角2。
我有一些自定义复选框，最初可以选择多个。我将选择的项存储在如下数组中：
eventChkArr: any = [];
updateChecked(value: any, event: any) {
if (event.target.checked) {
this.eventChkArr.push(value);
}
else if (!event.target.checked) {
let index = this.eventChkArr.indexOf(value);
this.eventChkArr.splice(index, 1);
}
}当用户选择多个复选框时，会弹出一个模式(由于某种原因，该模式不会弹出)并询问他们是否要选择多个复选框。现在，我要做的是，如果用户点击没有按钮，那么只有最后点击按钮之前，模态弹出将保持选中，并在用户的进一步单击，只有一个复选框将被选中一次。如果他们点击“是”，那么可以选择多个复选框。但是，我怎样才能做到这一点，有帮助吗？蒂娅。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-05 06:21:19
https://plnkr.co/edit/yU4P3zsQ3QaH9Vby8M3I?p=preview
您可以将每个复选框的选中值保存在“eventTypeChkBox”数组中：
eventTypeChkBox: Array<{chkBoxImageUrl: string, id: string, val: string, checked: boolean}> = [
{chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg" ,id: "item-1", val: "1", checked: false},
{chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-2", val: "2", checked: false},
{chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-3", val: "3", checked: false},
{chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-4", val: "4", checked: false}
];现在您可以将“签入”(ngModel)的值放在每个复选框中：
<div *ngFor="let eventChk of eventTypeChkBox">
<div class="col-md-3">
<label class="btn-custom">
<img src="{{eventChk.chkBoxImageUrl}}" alt="{{eventChk.val}}" class="img-check img-circle" [ngClass]="{'check': eventChk.isClassVisible } "
width="100" height="100">
<input [(ngModel)]="eventChk.checked" (ngModelChange)="onModelChange(eventChk) type="checkbox" name="{{eventChk.id}}" id="{{eventChk.id}}" value="{{eventChk.val}}" class="hidden" autocomplete="off"
(change)="updateChecked(eventChk, $event); eventChk.isClassVisible = !eventChk.isClassVisible;">
</label>
<p>{{eventChk.val}}</p>
</div>
</div>**如果您想使用(ngModel)指令：
1.您应该在您的“应用模块”中导入“FormsModule”：
import {FormsModule} from "@angular/forms";
@NgModule({
imports: [ BrowserModule, FormsModule],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}- 您需要为每个‘复选框’输入添加不同的'name‘属性，这就是我在html中使用name=“{eventChk.id}}”(您需要唯一的名称)的原因。
当您有(ngModel)时，您可以控制检查的内容和没有检查的内容。
如果要检测模型更改，可以在模板和类上使用(ngModelChange)="onModelChange(eventChk)“：
onModelChange(eventTypeChkBoxObj) {
if(eventTypeChkBoxObj.checked) {
if(this.getCheckedCount() == 2){
let result = confirm("Multiple checkboxes?");
if(!result) eventTypeChkBoxObj.checked = false;
}
}
}要检查不需要“eventChkArr”的项值，可以筛选它们：
getCheckedValues() {
return this.eventTypeChkBox.filter(obj => obj.checked).map(obj => obj.val)
}经核对的obj计数：
getCheckedCount():number{
return this.getCheckedValues().length;
}例如：
eventTypeChkBox = [{checked:true, val:1},{checked:true, val:2},{checked:false, val:3}]getCheckedValues()将返回：
["1","2"]祝好运!
Stack Overflow用户
发布于 2017-01-05 05:19:43
我建议你这样做：
<button *ngIf="eventChkArr.length > 1" (click)="popFisrtEvents()">Many choice ?</button>其方法是：
popFisrtEvents() {
this.eventChkArr.splice(0, this.eventChkArr.lentgh -2);
}所以当你点击你的复选框时，你不会阻止用户.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41485885
复制相关文章
点击加载更多
腾讯云开发者
