选中复选框时取消选中文本输入和清除文本输入上的复选框答案

【问题标题】：Uncheck checkbox on text input & clear text input when checkbox is checked选中复选框时取消选中文本输入和清除文本输入上的复选框
【发布时间】：2023-03-11 05:08:01
【问题描述】：

我有一个搜索栏和复选框：

<input type="text" placeholder="Search..." (keyup)="onKey()" [(ngModel)]="input">
<input type="checkbox" (click)="clearSearch()" [(ngModel)]="checkbox">View All

每当有人在搜索栏中键入内容时，我都希望复选框处于未选中状态。同样，每当有人选中复选框时，我都希望清除搜索栏。

我尝试了以下方法：

export class App {
 checkbox = ['checked']
 clearSearch() { 
 this.input = '';
};
onKey() { 
 checkbox = ['unchecked']
}

但这显然不太奏效。

这是一个带有上述代码的 plunker：https://plnkr.co/edit/uAYxswpoz18jlRUqAMn5?p=preview

实现此功能的最佳方法是什么？

谢谢！

【问题讨论】：

标签： html css angular checkbox input

【解决方案1】：

你快到了。首先，我建议您对复选框数据模型使用布尔值。数组评估为真，因此复选框仍处于选中状态。如果您引用实例属性，您应该使用单词this 来引用它们。所以onKey()的方法应该是：

onKey() { 
 this.checkbox = false
}

plunker

【讨论】：

【解决方案2】：

在你的函数中将 this.checkbox 设为 false。

 <input type="checkbox" (click)="clearSearch()" [(ngModel)]="checkbox">View All

你的功能

 onKey() { 
     this.checkbox = false;
  }

DEMO

【讨论】：